2

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

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

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

解决方案1的诱惑：从这个开始（建议在这里css3files.com评论 - David Buell）：

解决方案1：

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

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

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

默认文本大小更改似乎是一个问题，因为“px”和“rem”文本保持不变。但我想知道是否有关于此的使用统计信息（这个 SO 用户认为没有人）。如果它真的被使用了，我想我应该把“简单数学”字体大小的定义放在 html 标签上。

解决方案 2：

body {  font-size: 0.8125rem;}

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

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

总结一下：

  • 无需容纳任何低于 IE9 的东西。
  • 响应式设计。
  • 很好地处理缩放。
  • 如果确实使用了，则处理用户文本大小的变化。
  • 没有魔法，尽可能准系统（我使用 css 预处理器，但我想避免疯狂使用它）。

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

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

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

谢谢

-olivvv

4

2 回答 2

2

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

字体大小：14px；/* 像素后备规则应该放在第一位 */ font-size: 1.4rem;

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

于 2015-11-05T22:28:09.390 回答
1

我在这里做了一些测试：http: //codepen.io/Olivvv/full/aGDzI

一些解释：

解决方案 1：WRONG html { font-size: 10px;} 阻止应用永久浏览器/用户字体大小设置。如果用户请求了更大的字体大小，它应该会生效。

参见这里的 SO 网站，字体很大，但至少用户得到了字体大小的增加。

解决方案 2：OK body { font-size: 0.8125rem;} 实际上与 body { font-size: 0.8125em;} 相同，因为只能从元素“em”继承与“rem”相同的值（“ rem”代表root em，根元素的em值，即元素）

解决方案 3：有趣

html{font-size: 62.5%;}
body{font-size: 1.6em;}

---> 1 rem == 10px（如果浏览器设置为默认，即16px；-（62.5/100）*16 == 10）

现在关于可能的策略：

1. 仅雷姆

html{font-size: 6.25%;}
body{font-size: 16em;}

+ 仅使用 rem；用于字体大小、宽度、填充、边距、边框。这似乎是最简单的方法。这里 1 rem 相当于默认设置中的 1px。它响应用户对默认设置的更改，因此可以访问。在做响应式设计时，可以通过改变 % 的值来缩放界面。例如：

html

整个界面被放大。缩放是垂直和水平的。

div.foo{
font-size: 16rem;
border: 16rem solid;
width: 350rem;
border-color: limegreen;

}

这将创建一个垂直和水平扩展的框。

问题：垂直缩放怎么样？

2. rem 和 em（为了得到垂直缩放）

rem -> 界面元素，本质上是宽度

em -> 文本（可以通过更改正文上的字体大小值独立于界面元素（在 rem 中）调整大小）

px -> 分隔符，本质上是边框

通过这种方式，我们实现了能够很好地响应浏览器缩放和浏览器字体大小设置的界面

在一些博客上阅读的关于想法的一些评论和

“如果您的大脑以像素为单位工作，请仅使用 px”-> 非常错误。对于某些明确要求更大字体大小的用户，以 px 为单位的字体大小将无法读取。（那么 dpi 与 96 不同呢？）

“em 中的布局”-> 平均错误，因为不同的用户字体大小会出现水平滚动条或不使用完整的视口空间。这种行为与缩放有关，而不是字体大小。（请注意，我不考虑使用早于 IE9 的浏览器 - 只是让它们使用默认值）

于 2013-11-16T21:19:09.520 回答