@media查询看起来不错，但是不起作用
[英]@media query looks OK but doesn't work
问题描述
对@media查询进行了简单测试以查看其效果： http : //www.casedasole.it/km2014/test.html
在test.css中，有一个@media查询，如果我已经理解了媒体查询，则应该将风景色平板电脑（1024x768）上的背景颜色从黑色更改为红色。 css验证，xhtml验证，但是使用Chris Pederick的Web开发人员扩展-> View Responsive Layouts和transmog.net iPad模拟器（我没有iPad），背景在FF中保持黑色。
如果有人可以解释为什么它不起作用，那么我敢肯定我会在媒体查询方面感到很开心。
3 个解决方案
解决方案1
1 已采纳 2014-01-06 23:16:36
首先，这些是最好的断点
@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 */ }
现在，根据您的情况，使用此媒体查询
@media (max-width:1024px) {
html, body {
background-color: #f00;
color:#000;
}
}
解决方案2
0 2014-01-06 23:17:06
您需要修复媒体查询，使用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.