html - EM 可以定义为总屏幕宽度的一部分吗？

Question

是否可以这样说:

100% 屏幕宽度 = 20ems -OR- 1em = 5% 屏幕宽度 ?

想法是让字体和 ems 中指定的任何其他内容自动随屏幕缩放。

在响应式布局上工作，我试图避免任何明确的测量；一切都以 % 开始，但我正在尝试找出一种使用 em 和 % 的有效方法。如果我可以固定 em 与屏幕宽度的比率，那将会有所帮助。

如果这是可能的，最小的方法是什么？现在我只使用 CSS 和 HTML。如果可以的话，我宁愿避免使用 javascript 等。

Answer 1

正如 Hakan 提到的，视口(viewport)单元是一种可能性，但并不是真正明智的选择，因为目前的支持很糟糕。最好的方法可能是设置媒体查询，然后针对不同的屏幕尺寸调整字体。

例如:

@media only screen and (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}
@media only screen and (max-width: 1024px) {
      body {
        font-size: 18px;
      }
    }

这是对整个视口(viewport)和媒体查询主题的一个很好的解释 http://www.quirksmode.org/mobile/viewports.html