Media Queries

Code Example

    <link rel="stylesheet" type="text/css" media="screen and (min-width: 320px) and (max-width: 767px)" href="css/mobile.css" />
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 768px) and (max-width: 1024px)" href="css/tablet.css" />
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 1025px)" href="css/default.css" />
    
     /* Extra small devices (phones, 600px and down) */
     @media only screen and (max-width: 600px) {...}

     /* Small devices (portrait tablets and large phones, 600px and up) */
     @media only screen and (min-width: 600px) {...}

     /* Medium devices (landscape tablets, 768px and up) */
     @media only screen and (min-width: 768px) {...}

     /* Large devices (laptops/desktops, 992px and up) */
     @media only screen and (min-width: 992px) {...}

     /* Extra large devices (large laptops and desktops, 1200px and up) */
     @media only screen and (min-width: 1200px) {...}
    </style>