Question

我不希望这里有一个适合所有人的答案，但我一直在博客上阅读博客“设计网站以使其响应的最佳方式”，而且我现在比开始时更加困惑

压倒性的观点似乎是“不要使用特定于设备的MQ，而是使用断点”。

我完全理解这一点，但这在现实世界中根本不起作用。

例如。

在桌面上设计一个看起来最大宽度为800px的网站，一切都很好。在小屏幕设备上查看它看起来也很棒。但是，由于视网膜设备的分辨率提高，观看iPhone 6上的网站以及桌面上800px大而粗的一切都很小。

当然，解决这个问题的唯一方法是使用特定于设备的MQ - 每个人都尖叫不是一个好主意。

我现在真的很困惑。

我在某处错过了部分故事吗？

我现在不能忍受另一个博客，因为我的头在转动，所以我想我会问专业人士;）

非常感谢任何解决此特定（视网膜设备）问题的指示。

Answer 1

这是一个非常广泛的主题，但总的来说，你可以避免它将你的布局从硬像素改为相对的测量（em，rem，vh/vw等）

如果您在HTML标记中定义：

 html {
    font-size: 62.5%;
 }

然后你可以使用em/rem meassures，你可以做到这一点：

 @media all and (max-width: 80rem) /* MQ 800 pixels no matter pixel ratio */

如果您定义字体大小（例如以像素为单位），像素比率为3，则字体大小将是指定值的1/3。但如果你在em中进行，那么在所有设备中它都是相同的。

硬像素示例：

div { 
   width: 300px;
}

修改

在评论中，您可以看到有关62.5%已定义字体大小的更多说明以及为什么它是一个很棒的功能。

Answer 2

在<head>代码

之间添加视口元

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

您的网站正在扩展到设备宽度