bonaca bonaca - 3 months ago 6
CSS Question

different stylesheets for different screen widths

I want to use different stylesheets for different screen

widths
(before and after
700px
).

<link rel="stylesheet" href='media700.css' media="screen and (max-device-width:700px)">
<link rel="stylesheet" href='media1366.css' media="screen and (min-device-width:701px)">


Doesn't work.
media1366
is always overwriting
media700
.

Answer

The width of your device is larger than 700px, therefore

max-device-width: 700px

is not true and

min-device-width: 701px

is true, therefore the behavior you experience is actually expected.

The two rules cannot override each-other, as they are mutually exclusive.