@media查询看起来不错，但是不起作用
[英]@media query looks OK but doesn't work
问题描述
Did a simple test of @media queries to see what works: http://www.casedasole.it/km2014/test.html 
对@media查询进行了简单测试以查看其效果： http : //www.casedasole.it/km2014/test.html
In test.css there's a @media query that should - if I've understood media queries - change the background color from black to red on landscape tablets (1024x768). 在test.css中，有一个@media查询，如果我已经理解了媒体查询，则应该将风景色平板电脑（1024x768）上的背景颜色从黑色更改为红色。 The css validates, the xhtml validates, but the background stays black in FF using Chris Pederick's Web Developer Extension -> View Responsive Layouts, and in transmog.net iPad emulator (I have no iPad). css验证，xhtml验证，但是使用Chris Pederick的Web开发人员扩展-> View Responsive Layouts和transmog.net iPad模拟器（我没有iPad），背景在FF中保持黑色。
If somebody can explain why it's not working, I'm sure I'll have fun with media queries. 如果有人可以解释为什么它不起作用，那么我敢肯定我会在媒体查询方面感到很开心。
3 个解决方案
解决方案1
1 已采纳 2014-01-06 23:16:36
First off all, these are the BEST breakpoints 首先，这些是最好的断点
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Now in your case, use this media query instead 现在，根据您的情况，使用此媒体查询
@media (max-width:1024px) {
html, body {
background-color: #f00;
color:#000;
}
}
解决方案2
0 2014-01-06 23:17:06
You need to fix your media query, using max-device-width is not valid, you can use max-width instead. 您需要修复媒体查询，使用max-device-width无效，您可以改用max-width 。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
html, body {
height: 100%;
font-size: 12px;
text-align: left;
margin: 0;
padding: 5px;
background-color: #000;
font-family: verdana,arial,geneva,helvetica,sans-serif;
color: #fff;
text-align: center;
}
/* iPad and other tablets (landscape) */
@media screen and (max-width: 1024px) {
html, body {
background-color: #f00;
color: #000;
}
}
</style>
</head>
<body>
<h1>Why is background not red in iPad landscape 1024px??</h1>
</body>
</html>
解决方案3
0 2014-01-06 23:17:59
如果您使用“ @media only screen and（max-width：1024px）”，它也似乎可以工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.