After searching through related questions, I'm still unable to get media queries to work for my site (in progress):
I first ensured that my site validates as valid HTML5. I'm also using the <meta> tag with name="viewport":
<meta name="viewport" content="width=device-width,initial-scale=1">
Using help from related questions here, I went to http://mediaqueriestest.com/, which reports my Samsung Galaxy S4 as having a device-width of 640px.
I'm using a separate style sheet in which to overwrite style rules in the main style sheet.
<link rel='stylesheet' type='text/css' href='style/main.css'>
<link rel='stylesheet' type='text/css' href='style/mobile.css' media='only screen and (device-width: 640px)'>
Inside mobile.css:
nav {
float: none;
width: 50%;
}
main {
float: none;
width: 90%;
}
.section {
background: none;
}
To ensure that the problem wasn't with clients fetching the style sheets in the wrong order, I tried appending a media query to my main CSS style sheet:
@media screen only and (device-width: 640px) {
html { color: red; }
}
However, this didn't work either. I've been specifying device-width: 640px in an attempt to just ensure my mobile CSS works right, but my overall goal is to reliably load different CSS for all smart phones and tablets.
I should also note I'm using Chrome on my Galaxy S4.
try with i think this should work
@media only screen and (max-device-width: 640px) {
html { color: red; }
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句