Question

我正在尝试使用1366 x 768的媒体查询CSS专门定位我的桌面分辨率。因此我使用了这种方法。

@media (max-width: 1367px)

此桌面媒体查询CSS实际上有效。

不幸的是，它与我的S4和iPad的媒体查询CSS冲突导致它们无法正常工作。如下图所示是我对S4和iPad的媒体查询

S4

@media only screen and (max-device-width: 440px)

ipad公司

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1)

除了我上面尝试的方法来完善我的CSS，有什么方法可以专门针对我的桌面分辨率1366x768？

Answer 1

@media (max-width: 1367px) and (min-width: 1365px)

您的最大宽度规则包括宽度小于1376px的所有内容，因此您应该设置最小值。

不要忘记，这些测量指的是浏览器窗口，而不是实际屏幕，因此它们可能不适合您的目的。

例如，我的桌面是1600 x 1200。在全屏幕上，我的Firefox窗口（由css引用）宽度为1583像素。不是1600px。

Answer 2

为iPad和S4使用更具体的查询：

ipad公司

CSS

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles */
}

智能手机（S4）

CSS

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 440px) {
  /* Styles */
}

Answer 3

从最大的屏幕设备开始，并在分辨率下降时更新规则：

@media screen and (min-width: 1367px){ ... }
@media screen and (max-width: 1366px) and (min-width:1024px){ ... }
@media screen and (min-width: 1023px) and (max-width:768px){ ... }

等等。

如果你想使用级联，请记住，最后一条规则将从它们之前声明的规则继承样式：

@media screen and (max-width:1023px){...}
@media screen and (max-width:768px){...} ->

在这种情况下，屏幕＆lt; 768px也将继承上一个声明中的规则。

无法使用媒体查询专门定位我的桌面

3 个答案: