0

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.

dippas
  • 58,591
  • 15
  • 114
  • 126
qadenza
  • 9,025
  • 18
  • 73
  • 126

3 Answers3

2

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.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
  • But if I resize browser window, for example on 500px, `and reload the page', media700` should be used, shouldn't it ? – qadenza Sep 08 '16 at 10:39
  • 2
    No, that is window width. Your media query relies on device width. If you intend to query by window width, use min-width and max-width instead of min-device-width and max-device-width, respectively. – Lajos Arpad Sep 08 '16 at 10:51
1

you just need to change the order and delete the device word

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

See more info on this Stack Overflow Answer

Community
  • 1
  • 1
dippas
  • 58,591
  • 15
  • 114
  • 126
1

You have to write media queries in sequence Higher Size to Lower Size, so in your case the files should be includes in sequence from Higher 701px to Lower 700px.

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