AJB AJB - 3 months ago 16
CSS Question

How to incorporate specific CSS files for Responsive Design for Desktop and Mobile Browsers

What I want is to implement dynamic design for mobile and desktop browsers. So far here is my implementation:

<link rel='stylesheet' media='only screen and (min-width: 1441px)' href='css/main.css' />
<link rel='stylesheet' media='only screen and (max-width: 320px)' href='css/design320.css' />
<link rel='stylesheet' media='only screen and (max-width: 360px)' href='css/design360.css' />


but my problem is that design360.css is still downloaded even though I'm testing for 320px width resolution.

Is there any solution to incorporate the design for specific resolution?

Answer

Try adding a min-width attribute as well.

<link rel='stylesheet' media='only screen and (min-width: 321px) and (max-width: 360px)' href='css/design360.css' />

Right now your second and third stylesheets will apply to any page less than 360px wide, because only max-width is supplied.

Comments