建立响应式网站的一般问题答案

【问题标题】：general question to built responsive website建立响应式网站的一般问题
【发布时间】：2021-06-28 14:42:42
【问题描述】：

我正在学习网页设计（wordpress），所以我遇到了媒体查询的问题。我使用 Bootstrap 4 网格系统，所以我也使用 bootstrap 4 的媒体查询这是：

// 超小设备（人像手机，小于 576px） @media（最大宽度：575.98px）{ ... }

// 小型设备（横向手机，576px 及以上） @media (min-width: 576px) and (max-width: 767.98px) { ... }

// 中型设备（平板电脑，768px 及以上） @media (min-width: 768px) and (max-width: 991.98px) { ... }

// 大型设备（台式机，992px 及以上） @media (min-width: 992px) and (max-width: 1199.98px) { ... }

// 超大型设备（大型桌面，1200 像素及以上） @media（最小宽度：1200px）{ ... }

我看到这个媒体查询对于 iphone 和三星的新系列来说不够特别。我看到我必须编写额外的断点来定位那些手机。我在谷歌上进行了搜索，我看到了其他类型的媒体查询，它使用 webkit-device-pixel-ratio:2 或 3 等来定位宽度和高度。我还看到还有设备定位媒体查询，这让我感到困惑我现在的问题是：如果我为 375 宽度 4014 宽度的 iphone 等使用额外的断点就足够了，或者我还必须以高度和 webkit-device-pixel ratio 为目标。你有什么建议？有很多不同分辨率的移动设备。谢谢

【问题讨论】：

在媒体查询中，我认为您必须首先关注 Galaxy S5，因为它对 MotoG、iPhone 6/7/8 和 plus 以及 Pixel X2 显示相同的视图。对于 iPad，您可以使用 768 - 1024，对于 Ipad Pro 和笔记本电脑，您可以使用 1024 - 1600 / 2000，对于超大型设备，您可以使用 2000 或更多。我一直在使用它，它每次都为我工作，这就是为什么我和我使用的建议一样。你可以检查一下，然后告诉我它是否适合你。

标签： media-queries

【解决方案1】：

谢谢，我用这段代码做了：

@media screen and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
    
    .site-header  {
        background-color:brown;
    }
    
}

但是当我在 chrome 检查元素中打开时，我发现它只针对 Galaxys5 和 Moto G4。而不是 iphone 或 Pixel2。你可以看到自己：http://webdesignleren.com/ 谢谢

【讨论】：