Question

我对每部手机几乎都有查询。（我想至少）

示例Iphone 6/7/8（375x667），但使用：

@media only screen and (max-device-width: 640px) and (min-device-width: 360px){
   #sidebar {
       min-width: 360px;
       max-width: 360px;
       margin-right: -360px !important;
   }
}

我的完整侧边栏响应式媒体查询： https://jsfiddle.net/aw5ty84a/6/

不能在这里添加所有查询。但问题是手机使用的手机分辨率太小，或iPhone 5使用过大的分辨率查询。

Answer 1

查询由min＆amp;最大像素宽度，所以iPhone 6例如只会拾取代码中相关的第一个媒体查询，而忽略任何后面的（忽略正确的）。

JS可能有一种方法可以通过特定设备进行定位，但由于媒体查询仅基于最小/最大像素宽度，因此您无法使用CSS。

您需要将宽度从精确像素更改为百分比，并使用更广泛的像素范围，如上所述。

Answer 2

理想情况下，您不希望每个手机大小都有一个媒体查询。最小的屏幕尺寸为320px，因此这是您想要的最小尺寸。

我喜欢有大约4-6种尺寸的媒体查询，比如XL，L，M，S和XS。 XL的最大宽度为1200px，最大宽度为940px，依此类推。这将改善您的组织和代码可读性。每个项目都有所不同 - 有时您可能不需要XL，但可能需要XXS。

以Bootstrap approach为媒体查询断点为例。请注意，这些值是Bootstrap使用的值，您可以提出最适合您项目的值;

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

如果在特定断点处发现错误的特定情况下您可以添加该媒体查询，但如果您编码干净，则通常不会发生这种情况。

祝你好运！

手机使用其他媒体屏幕查询

2 个答案: