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
Post a Comment