响应式设计：用什么作为相对尺寸的参考？
Responsive Design: What to use as a reference for relative size?
目前正在开发我的第一个高度响应的网站。我已经完成了一些关于该主题的基本教程，尽管我经常注意到它们依赖于稍旧的移动设备，并且它们根据屏幕尺寸属性 @media 切换设计。
现在我们的移动设备在 6" 屏幕上具有与在 24" 显示器上相同的全高清分辨率...所以这不可能工作。
那么我可以使用什么来正确缩放文本和菜单之类的东西呢？我不想绝对在任何地方都使用百分比值。
我的直觉是计算一个参考大小，我知道它在屏幕上的大小始终相同。或者至少可以提示我如何调整尺寸。
我尝试使用 CSS 中的 "em" 测量方法来创建一个具有此尺寸的元素，然后通过 Jquery 测量它的高度，因为根据我的理解， "em" 大小取决于浏览器。
结果总是16px，不管我用什么浏览器...
那么这个问题通常使用什么类型的相对大小参考？
提前致谢！
你在 CSS 中有不同的相对长度单位：
em相对于元素的font-size（2em表示当前字体大小的2倍）
ex相对于当前字体的x-height（很少使用）
ch 相对于宽度的“0”（零）
rem 相对于根元素的字体大小
vw相对于视口宽度的1%
vh相对于视口高度的1%
vmin 相对于视口较小尺寸的 1%
vmax 相对于视口较大尺寸的 1%
% 相对于父级
em 和 rem 单元在创建完美可扩展的布局方面非常实用！
您可能想尝试使用 min-device-pixel-ration 媒体查询（查看 https://css-tricks.com/snippets/css/retina-display-media-query/）
如果您在 6" 屏幕上的像素数与通常在 24" 显示器上的像素数相同，则几乎可以肯定在较小的屏幕上像素比大于 1。否则几乎无法阅读！
em 单位的默认值是 16px - 但是，您可以通过在 body 标记中更改它来将此值重置为您想要的任何值。
body {
font-size: 1em;
}
因此使用该示例 1em = 16px、2em = 32px、3em = 48px 等等。
此网站是有关如何缩放 em 的重要资源，因此您无需进行数学计算：http://type-scale.com/
请记住，在使用 ems 时，使用嵌套元素会产生复合效果。所以如果你有一个字体大小为 1em 的 div，在一个字体大小为 2em 的 div 里面，你最终会得到一个 3em 的字体大小。
为防止这种情况，您可以注意嵌套，或使用 rem 单位。 rem 代表根 em 并且将始终相对于根元素缩放并忽略多个嵌套值。
目前正在开发我的第一个高度响应的网站。我已经完成了一些关于该主题的基本教程，尽管我经常注意到它们依赖于稍旧的移动设备，并且它们根据屏幕尺寸属性 @media 切换设计。
现在我们的移动设备在 6" 屏幕上具有与在 24" 显示器上相同的全高清分辨率...所以这不可能工作。
那么我可以使用什么来正确缩放文本和菜单之类的东西呢？我不想绝对在任何地方都使用百分比值。
我的直觉是计算一个参考大小，我知道它在屏幕上的大小始终相同。或者至少可以提示我如何调整尺寸。
我尝试使用 CSS 中的 "em" 测量方法来创建一个具有此尺寸的元素，然后通过 Jquery 测量它的高度，因为根据我的理解， "em" 大小取决于浏览器。
结果总是16px，不管我用什么浏览器...
那么这个问题通常使用什么类型的相对大小参考？
提前致谢！
你在 CSS 中有不同的相对长度单位：
em相对于元素的font-size（2em表示当前字体大小的2倍）
ex相对于当前字体的x-height（很少使用）
ch 相对于宽度的“0”（零）
rem 相对于根元素的字体大小
vw相对于视口宽度的1%
vh相对于视口高度的1%
vmin 相对于视口较小尺寸的 1%
vmax 相对于视口较大尺寸的 1%
% 相对于父级
em 和 rem 单元在创建完美可扩展的布局方面非常实用！
您可能想尝试使用 min-device-pixel-ration 媒体查询（查看 https://css-tricks.com/snippets/css/retina-display-media-query/）
如果您在 6" 屏幕上的像素数与通常在 24" 显示器上的像素数相同，则几乎可以肯定在较小的屏幕上像素比大于 1。否则几乎无法阅读！
em 单位的默认值是 16px - 但是，您可以通过在 body 标记中更改它来将此值重置为您想要的任何值。
body {
font-size: 1em;
}
因此使用该示例 1em = 16px、2em = 32px、3em = 48px 等等。
此网站是有关如何缩放 em 的重要资源，因此您无需进行数学计算：http://type-scale.com/
请记住，在使用 ems 时，使用嵌套元素会产生复合效果。所以如果你有一个字体大小为 1em 的 div，在一个字体大小为 2em 的 div 里面，你最终会得到一个 3em 的字体大小。
为防止这种情况，您可以注意嵌套，或使用 rem 单位。 rem 代表根 em 并且将始终相对于根元素缩放并忽略多个嵌套值。