Is it possible to have media Queries that target different devices screen sizes (desktop, laptops, tablets and mobile) in separate stylesheet.
And also will I have to link them separately in HTML??
Lastly, what is the difference between max-width and max-device-width??
Yes, you can have as many stylesheets as you want, you just link to them in your html, like:
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">Keep in mind that each stylesheet requires a http request, so this is slower than having them all in a single stylesheet with sections denoted as:
@media only screen and (max-width: 600px)
{
...
}max-width is the size of the browser. max-device-width is the size of the physical screen.
Yes but generally its a bad idea. 
Keep your media queries in the same stylesheet and organise the styles carefully.
Forget about max-device-width its seldom useful. Ultimately you are just interested in the width available for your design no matter what the device is. Use max-width or min-width media queries. (Device-width is deprecated anyway.)
Ok thanks tracknut and PaulOB… What of in a situation where your webpage header-section and hero-section are in the same CSS stylesheet… Can each section have separate Media query for different screen sizes??
Yes you can have as many @media… queries as you like, in a single stylesheet file.
Ok I appreciate
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.