css - rem, px, mediaqueries for browsers >=IE9

Question

我有一个元素，其中 IE9 是最低兼容性浏览器。这意味着我可以使用 rem 单位。

根据我在涉及许多开发人员的大型元素中的经验，“em”的使用会造成相当大的困惑。我并不是说它本身不好，只是它似乎随着时间的推移“自然地”发生，当有不同的人在一个元素上工作时具有不同的技能。 Dom 元素往往会堆积起来，这不适合“em”的复合行为。

在网上看了很多资源后，似乎有很多关于这个问题的 cargo 崇拜。

有方案一的诱惑:从这里开始(建议在此处 css3files.com comment - David Buell ):

解决方案 1:

html {  font-size: 10px;}
body {  font-size: 1.3rem;}

Rem 用于任何与文本相关的内容，px 用于其余内容。

但尽管如此，我不确定我在哪里真的被限制使用除“rem”之外的另一个单位。我做了一些缩放测试，并没有注意到“rem”和“px”之间的区别。 “rem”相对于“px”的优势似乎是“rem”将相对于正文中用“%”设置的大小，这允许为特定断点更改一行中的所有文本大小。

默认文本大小更改似乎是一个问题，因为“px”和“rem”文本保持不变。但我想知道是否有关于此的使用统计信息(this SO user thinks nobody)。如果它真的被使用了，我想我应该删除 html 标签上的“easy math”字体大小定义。

解决方案 2:

body {  font-size: 0.8125rem;}

这给出了 13px 大小，浏览器默认大小为 16px - 用户仍然可以更改默认设置。 (从 16 开始数学并不难)

我真正不确定的是不同屏幕分辨率的情况，以及不同像素密度的情况(我知道可以在 Windows 上更改)。

总结:

• 不需要适应 IE9 以下的任何东西。
• 响应式设计。
• 很好地处理缩放。
• 处理用户文本大小的变化(如果确实使用的话)。
• 没有魔法，尽可能准系统(我使用 css 预处理器，但我想避免疯狂使用它)。

我认为许多前端开发人员将他们的界面调整为浏览器缩放。但是纯文本缩放的做法是什么？它是一种更隐蔽的浏览器功能。有多少开发人员实际测试它并为其编写代码？

我看到 SO 支持它，但它有点突破了一定的规模。

支持响应式网页设计的 IE9+ 界面的正确基础设置是什么？

Answer 1

遵守规则 - 所有字体大小都必须使用 rem 指定，仅使用像素回退。不要单独使用百分比、ems 或像素。

字体大小:14px；/* 像素回退规则应该放在第一位 */ 字体大小:1.4rem;

更多信息 - https://github.com/stubbornella/oocss-code-standards