rem,px,浏览器的媒体查询> = IE9

时间:2013-11-13 14:35:49

标签: css3 responsive-design internet-explorer-9 pixels em

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

根据我在大型项目中的经验,涉及许多开发人员,使用“em”会造成很多混乱。我并不是说它本身就很糟糕,只是随着时间的推移它似乎“自然地”发生,当时有不同的人在项目上有不同的技能。 Dom元素倾向于堆积,并且不能很好地处理“em”的复合行为。

在网上看了很多资源后,似乎有很多货物崇拜的问题。

有解决方案1的诱惑: 从这开始(这里建议css3files.com comment - David Buell):

解决方案1:

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

为任何与文本相关的内容和其他内容的px。

但即使如此,我也不确定在使用另一个单位而不是“rem”的情况下,我真的无法理解。我做了一些缩放测试,并没有注意到“rem”和“px”之间的差异。 “rem”优于“px”的优点似乎是“rem”将相对于在主体上设置为“%”的大小,并且这允许针对特定断点更改一行中的所有文本大小。

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

解决方案2:

body {  font-size: 0.8125rem;}

这提供13px大小,浏览器默认大小为16px - 用户仍然可以更改默认设置。 (从16开始算数并不难)

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

总结:

  • 无需容纳IE9以下的任何内容。
  • reponsive design。
  • 处理缩放。
  • 处理用户文本大小更改(如果真的使用过。
  • 没有魔法,尽可能作为准系统(我使用css预处理器,但我想避免疯狂使用它)。

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

我看到SO支持它,但它有点超出一定规模。

IE9 + interace的正确基础设置是什么,支持响应式网页设计?

谢谢

-olivvv

2 个答案:

答案 0 :(得分:2)

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

font-size:14px; / *像素回落规则应首先* /    font-size:1.4rem;

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

答案 1 :(得分:1)

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

一些解释:

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

在这里看到SO网站,有很大的字体,但是至少用户会增加字体大小。

解决方案2:好的     body {font-size:0.8125rem;} 实际上是一样的     body {font-size:0.8125em;} 因为只能从元素“em”继承为与“rem”相同的值(“rem”代表根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相当于defome设置中的1px。它响应用户对默认设置的更改,因此可以访问。 在进行响应式设计时,可以通过更改%的值来缩放界面。例如:

HTML

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

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

}

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

问题:垂直缩放怎么样?

<强> 2。 rem和em(为了获得垂直缩放)

rem - &gt;界面元素,宽度基本上

em - &gt; text(可以通过更改正文中的font-size值,独立于界面元素(在rem中)调整大小)

px - &gt;分离器,边界基本上

通过这种方式,我们可以实现对浏览器缩放和浏览器字体大小设置做出良好响应的界面

在某些博客和

上阅读的一些评论意见

“只使用px,如果你的大脑以像素工作” - &gt;非常错误。 px中的字体大小对于明确要求更大字体大小的某些用户来说是不可读的。 (那么dpi与96不同呢?)

“em中的布局” - &gt;平均错误,因为不同的用户字体大小会显示水平滚动条或不使用完整的视口空间。这种行为与缩放有关,而与字体大小无关。 (请注意,我不会考虑比IE9更早的浏览器 - 只是让它们回到默认值上)