How can I link a separate stylesheet in HTML using media Queries

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.

1 Like

Yes but generally its a bad idea. :slight_smile:

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.

1 Like

Ok I appreciate