【发布时间】：2013-07-13 05:07:51
【问题描述】：
我创建了一个可以正常运行的网站。
我根据之前的响应式网站放置了媒体查询，但它在我的网站中不起作用。
这是我的网站 www.itztotalsolutions.us，我尝试添加媒体查询以做出响应，但在移动设备或 ipad 中没有媒体查询效果.. 在这里我提到我在移动设备和 ipad 网站外观方面存在问题..根据我们在桌面上看到的，它似乎是一个普通的网站，而不是我为移动设备和 Ipad 编写的 css ......意味着它没有检测到设备分辨率。
这里是代码。在标题中：
<meta name="viewport" content="width=device-width" />
在 style.css 中：
body, html { height: 100%;}
body {
font-size: 12px;
line-height: 18px;
font-family: arial, sans-serif;
width:100%;
margin:auto;
background:url(images/main-full-bg.jpg) repeat #F60;
background-size:cover;
}
...etc.... all CSS for pages.. after it
/* ipad portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 980px) {
body { min-width: 768px; }
.shell { max-width: 748px; }
#navigation ul li { padding-left: 24px; font-size: 15px; }
.header-top { padding-left: 20px; padding-right: 20px; }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body { min-width: 320px; }
.shell { max-width: 320px; }
.header .shell { padding:0; background: url(images/m-header-shell.jpg) no-repeat 0 0; }
.header-top { padding: 0px 0 0px 0; }
#logo { margin: 0 auto; float: none; display: block; }
}
@media only screen and ( max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
#logo a { background: url(images/logo@2x.png) no-repeat 0 0; -webkit-background-size: 142px 57px; -moz-background-size: 142px 57px; background-size: 142px 17px; }
#navigation { background: url(images/navigation@2x.png) no-repeat 0 0; -webkit-background-size: 298px 32px; -moz-background-size: 298px 32px; background-size: 298px 32px; }
#navigation a.nav-btn span { background: url(images/nav-arr@2x.png) no-repeat 0 0; -webkit-background-size: 10px 15px; -moz-background-size: 10px 15px; background-size: 10px 15px; }
.pagination a { background: url(images/pagination@2x.png) no-repeat 0 1px; -webkit-background-size: 18px 40px; -moz-background-size: 18px 40px; background-size: 18px 40px; }
.main section { background: url(images/section@2x.png) no-repeat center bottom; -webkit-background-size: 300px 10px; -moz-background-size: 300px 10px; background-size: 300px 10px; }
}
我检查了当我在移动设备中运行时，CSS 似乎是从默认 CSS 而非查询 CSS 运行的。
请帮我解决这个问题
【问题讨论】：
-
标题是什么？
-
您能更详细地描述一下这个问题吗？ “它在我的网站上不起作用”不是一个很好的描述。您希望这段代码做什么，它实际上做了什么？
-
您在 IE8 中尝试媒体查询？你用什么浏览器？
-
我刚刚使用 Chrome 的开发人员工具进行了测试，看起来样式已从媒体查询中正确应用。你应该尝试刷新你的浏览器（可能是旧的 css 文件被缓存了）
-
@samirprajapati：嗨，萨米尔。您可以编辑您的问题以包含这些详细信息，然后每个人都会更轻松地看到它们。
标签： html css media-queries