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