Question

我是响应世界的新手（牢记这一点）。我有以下列出的媒体查询，其中一些是有效的，有些则不然。有效的是： @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 */}

Answer 1

您在css-Code中使用了两种不同的语法：min-width和min-device-width。

原因是，“device-Pixel”和“CSS-Pixel”之间可能存在差异 - 特别是在Apple的Retina-Displays上。具有如此高结果的设备通常将1个css像素映射到几个设备像素。

width：指的是css-Pixels的数量

device-width指设备本身的宽度，换句话说，就是设备的屏幕分辨率

（更多信息可在此处找到：http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml）

我想第二种语法，附加device - 关键字，被您正在使用的网站解释错误 - 它只会改变宽度，但设备宽度始终保持不变。< / p>

我建议减少媒体查询的数量。在大多数情况下，不需要这么多不同的语法，它们也会降低代码的可读性和可维护性。

使用其他工具关于该问题：

我建议使用浏览器本身来测试您网站的责任。这比在每次更改后将代码上传到在线平台要方便得多。

Firefox提供了一个用于测试不同屏幕分辨率的内置功能，这非常有用： http://www.webmonkey.com/2012/06/new-firefox-developer-tools-will-help-you-build-responsive-websites/

Chrome还有许多扩展程序。

无法使媒体查询正常工作。

1 个答案: