【发布时间】：2014-02-25 09:28:02
【问题描述】：
我是响应世界的新手（请记住这一点）。
我有下面列出的以下媒体查询，其中一些有效，而另一些无效。
有效的是：
@media only screen
and (min-width : 320px)
and (max-width : 480px) 和 @media only screen
and (min-width : 320px)
and (max-width : 480px)
但其他的不起作用。 我检查它们是否有效的方法是通过 FileZillah 在线上传文件/文件夹，然后我在 http://www.responsinator.com/ 上检查它
我的问题是为什么其他媒体查询对这两个不起作用？ 如果您知道比响应者更好的网站，请分享:)
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */}
/*iPhone 5 in portrait & landscape*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* Styles */}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */}
【问题讨论】：
-
关于另一个工具：Firefox 有一个功能，可以测试不同的屏幕尺寸。 webmonkey.com/2012/06/…
-
感谢分享 Maja！这实际上非常有帮助。您是否也知道为什么有些媒体查询对我有效而其他媒体查询无效？
-
我明白了，您使用了 2 种不同的语法：
min-width和min-device-width。我猜第二个语法，加上额外的device-keyword，被你正在使用的网站（并且可能也被firefox）解释错误javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml -
您可能需要在设备本身上对其进行测试，我们只使用
min-width，忘记min-device-width -
嘿，玛雅，你居然给了我一个正确的答案！它确实无法正常工作，因为我使用了 2 种不同的语法。我以前经历过它并改变了语法，但它以前不起作用。你的评论说服我再试一次，我意识到我必须在没有应用正确更改的情况下完成它。无论如何，我非常感谢。如果你喜欢，你可以发表你的评论作为答案，这样我就可以给你完整的分数：）谢谢！
标签： html css responsive-design