媒体查询不起作用 - 一个简单的演示页面答案

【问题标题】：Media query not working - a simple demo page媒体查询不起作用 - 一个简单的演示页面
【发布时间】：2014-06-16 05:59:56
【问题描述】：

好吧，在一个简单的 html 页面中，我无法运行媒体查询。我在一段时间后正在研究这些，因此我认为我犯了一些愚蠢的错误，我无法弄清楚。

HTML

<div class="resume">
    <section>
        <h2>Info</h2>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a dignissim ipsum. Aliquam venenatis sapien semper, rhoncus nulla nec, feugiat ligula. </p>
            <div class="spacer"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a dignissim ipsum. Aliquam venenatis sapien semper, rhoncus nulla nec, feugiat ligula. </p>
        </div>
    </section>
</div>

CSS

div.resume {width:50%;}
div.content {padding:10px 10px 25px;}
div.content p {text-align:justify; line-height:1.2em; font-size:.9em;}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {div.resume{width:100%}  }

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { div.resume{width:100%}  }

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { div.resume{width:100%}  }

这只是我页面中的一些示例代码，似乎不起作用。我尝试在这里和互联网上寻找类似的问题，但看起来我已经有了类似的问题，我的页面有正确的元标记，如下所示，并且正在使用 HTML5 doctype

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!DOCTYPE html>

媒体查询未启动。任何帮助将不胜感激。

【问题讨论】：

标签： html responsive-design media-queries liquid-layout

【解决方案1】：

您不需要在上课前使用标签“div”，也许您正在调整浏览器的大小以进行测试，这将不起作用，如果您想获得更动态的效果，您应该使用 min-width 和max-width 而不是 min-device-width 和 max-devide-width，请注意“设备”这个词不起作用，因为“设备”获取屏幕的最小宽度而不是浏览器的最小宽度

.resume {width:50%;}
.content {padding:10px 10px 25px;}
.content p {text-align:justify; line-height:1.2em; font-size:.9em;}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {.resume{width:100%}  }

/* iPads (landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { .resume{width:100%}  }

/* iPads (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) { .resume{width:100%}  }

【讨论】：

对，没错，只是在这里误入了，否则在我拥有的大量代码中还有其他用途。无论如何，它似乎并没有解决问题。
也许您正在调整浏览器的大小以进行测试，这将不起作用，如果您想获得更动态的效果，您应该使用 min-width 和 max-width 而不是 min-device-width和 max-devide-width，请注意“设备”一词它不起作用，因为“设备”获取屏幕的最小宽度而不是浏览器的最小宽度
宾果游戏！移除设备后它工作得很好，我理解为什么会这样，可能是为了我的本地测试，我需要取消设备。非常感谢。
酷！请@whyAto8 标记为“答案有用”，我很高兴发现答案对您有用，问候