Media query in HTML link is not linking to separate CSS file -


when use media query link multiple css files html link, full-size css file applies.

i able media queries work within 1 single css file using:

@media screen , (max-width: 700px) { body {     /* style changes */ } 

however, want separate files each media query. here test code not work me:

index.html

<head>     <meta name='viewport' content='width=device-width, initial-scale=1' />     <link rel='stylesheet' media='screen , (max-width: 700px)' href='mobile.css' />     <link rel='stylesheet'  href='stylesheet.css' />    </head>  <body> </body> 

mobile.css

body {     background-color:red; } 

stylesheet.css

body {     background-color:blue; } 

all files correctly named , saved within same folder. appreciated!

this due order in linking css files.

you need mobile.css classes override ones specified in stylesheet.css, include second.

<link rel='stylesheet'  href='stylesheet.css' />   <link rel='stylesheet' media='screen , (max-width: 700px)' href='mobile.css' /> 

Comments

Popular posts from this blog

javascript - How to synchronize the Three.js and HTML/SVG coordinate systems (especially w.r.t. the y-axis)? -

javascript - How do I find how many occurences are there of a highlighted string, and which occurence is it? -

java - Reading data from multiple zip files and combining them to one -