对响应式 CSS 媒体查询非常困惑
Very confused about responsive CSS media queries
我不希望这里有一个千篇一律的答案，但我一直在阅读 "the best way to design a site to make it responsive" 上的一篇又一篇博客，现在我比刚开始时更困惑了。
压倒性的意见似乎是"Don't use device specific MQ's, use breakpoints instead"。
我完全明白这一点，它非常有道理，但在现实世界中它根本行不通。
例如
设计一个在桌面上最大宽度为 800 像素时看起来很棒的网站，一切都很好。在小屏幕设备上观看它，它看起来也很棒。但是在 iPhone 6 上查看该站点，由于视网膜设备的分辨率提高，桌面上 800px 的所有大而粗的东西都很小。
当然，解决此问题的唯一方法是使用特定于设备的 MQ - 每个人都尖叫这不是一个好主意。
我现在很迷茫
我是不是漏掉了故事的一部分？
我现在无法忍受另一个博客，因为我的头在旋转，所以我想我会问专业人士；）
任何解决此特定（视网膜设备）问题的建议都将不胜感激。
在您的 <head> 标签之间添加视口元数据
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
您的网站正在缩放至设备宽度
这是一个非常宽泛的话题，但总而言之，您可以避免将布局从硬像素更改为相对测量（em、rem、vh/vw等）。
如果您在 HTML 标签中定义它：
html {
font-size: 62.5%;
}
然后你可以使用em/rem措施，你可以这样做：
@media all and (max-width: 80rem) /* MQ 800 pixels no matter pixel ratio */
如果您以像素为单位定义字体大小，像素比为 3，则字体大小将为指定值的 1/3。但是如果你在 em 中制作它在所有设备中都是一样的。
硬像素示例：
div {
width: 300px;
}
- 设备像素比：1 > 结果：300px;
- 设备像素比：2 > 结果：150px;
- 设备像素比：3 > 结果：100px;
相关措施的例子
div {
width: 30rem;
}
- 设备像素比：1 > 结果：300px;
- 设备像素比：2 > 结果：300px;
- 设备像素比：3 > 结果：300px;
祝你好运
编辑
在评论中，您可以看到更多关于 62.5% 定义的字体大小的解释以及为什么它是一个很棒的功能。
我不希望这里有一个千篇一律的答案，但我一直在阅读 "the best way to design a site to make it responsive" 上的一篇又一篇博客，现在我比刚开始时更困惑了。
压倒性的意见似乎是"Don't use device specific MQ's, use breakpoints instead"。
我完全明白这一点，它非常有道理，但在现实世界中它根本行不通。
例如
设计一个在桌面上最大宽度为 800 像素时看起来很棒的网站，一切都很好。在小屏幕设备上观看它，它看起来也很棒。但是在 iPhone 6 上查看该站点，由于视网膜设备的分辨率提高，桌面上 800px 的所有大而粗的东西都很小。
当然，解决此问题的唯一方法是使用特定于设备的 MQ - 每个人都尖叫这不是一个好主意。
我现在很迷茫
我是不是漏掉了故事的一部分？
我现在无法忍受另一个博客，因为我的头在旋转，所以我想我会问专业人士；）
任何解决此特定（视网膜设备）问题的建议都将不胜感激。
在您的 <head> 标签之间添加视口元数据
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
您的网站正在缩放至设备宽度
这是一个非常宽泛的话题，但总而言之，您可以避免将布局从硬像素更改为相对测量（em、rem、vh/vw等）。
如果您在 HTML 标签中定义它：
html {
font-size: 62.5%;
}
然后你可以使用em/rem措施，你可以这样做：
@media all and (max-width: 80rem) /* MQ 800 pixels no matter pixel ratio */
如果您以像素为单位定义字体大小，像素比为 3，则字体大小将为指定值的 1/3。但是如果你在 em 中制作它在所有设备中都是一样的。
硬像素示例：
div {
width: 300px;
}
- 设备像素比：1 > 结果：300px;
- 设备像素比：2 > 结果：150px;
- 设备像素比：3 > 结果：100px;
相关措施的例子
div {
width: 30rem;
}
- 设备像素比：1 > 结果：300px;
- 设备像素比：2 > 结果：300px;
- 设备像素比：3 > 结果：300px;
祝你好运
编辑
在评论中，您可以看到更多关于 62.5% 定义的字体大小的解释以及为什么它是一个很棒的功能。