html - 响应式设计 : What to use as a reference for relative size?

Question

目前正在开发我的第一个高度响应的网站。我已经完成了一些关于该主题的基本教程，尽管我经常注意到它们依赖于稍旧的移动设备，并且它们根据屏幕尺寸属性通过 @media 切换设计。

现在我们的移动设备在 6"屏幕上与在 24"显示器上具有相同的 FullHD 分辨率……所以这不可能工作。

那么我可以使用什么来正确缩放文本和菜单之类的东西呢？我不想绝对在任何地方都使用百分比值。

我的直觉想法是计算一个引用大小，我知道它在屏幕上的大小始终相同。或者至少可以提示我如何调整尺寸。

我尝试使用 CSS 中的“em”度量来创建一个具有此大小的元素，然后通过 Jquery 测量它的高度，因为根据我的理解，“em”是一个取决于浏览器的大小。

不管我用什么浏览器，结果总是16px...

那么这个问题通常使用什么类型的相对大小引用？

提前致谢!

Answer 1

CSS 中的相对长度有不同的单位:

em 相对于元素的font-size(2em表示当前字体大小的2倍)

ex 相对于当前字体的x-height(很少用到)

ch 相对于宽度的“0”(零)

rem 相对于根元素的字体大小

vw 相对于视口(viewport)宽度的 1%

vh 相对于视口(viewport)高度的1%

vmin 相对于视口(viewport)较小尺寸的 1%

vmax 相对于视口(viewport)较大尺寸的 1%

% 相对于父级

em 和 rem 单元在创建完美可伸缩的布局方面非常实用!

来源:http://www.w3schools.com/cssref/css_units.asp