rem和em学习笔记及CSS预处理
2017-05-09 16:54
337 查看
1、当元素A的字体单位是n rem时,它将根据根元素(html)的font-size的大小作为基准,比如
View Code
parent-div中的em-div的font-size为2rem,他的基准就是html的字体大小10*2=20,并不受父元素的影响。width:10em;就是20*10,即宽度为200px;2、重点理解:有一个比较普遍的误解,认为
5、通常不使用
我们经常会看到使用
使用
在不需要使用
使用
媒体查询中使用
不要在多列布局中使用
不要使用
View Code
parent-div中的em-div的font-size为2rem,他的基准就是html的字体大小10*2=20,并不受父元素的影响。width:10em;就是20*10,即宽度为200px;2、重点理解:有一个比较普遍的误解,认为
em单位是相对于父元素的字体大小。 事实上,它们是相对于使用
em单位的元素的字体大小。父元素的字体大小可以影响
em值,但这种情况的发生,纯粹是因为继承。 使用
em单位存在继承的时候,情况会变得比较棘手,因为每个元素将自动继承其父元素的字体大小。 继承效果只能被明确的字体单位覆盖,比如
px,
vw。使用
em单位的元素字体大小根据它们来定。 但该元素可能继承其父元素的字体大小,而父元素又继承其父元素的字体大小,等等。 因此,以
em为单位的元素字体大小可能会受到其任何父元素的字体大小影响。可以通过比较以上代码中带有em-div-none和em-div-fontem样式的div可以看出差别。3、当
em单位设置在
html元素上时,它将转换为
em值乘以浏览器字体大小的设置,来作为html的font-size大小。那么,10em就是10*html的font-size;4、总结 rem与 em 差异
rem单位翻译为像素值是由
html元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响,除非显式重写一个具体单位。
em单位转为像素值,取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小,除非显式重写与一个具体单位。
5、
rem单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不继承。重要的是: 一些设计师使用结合
rem单位的方式给
html元素设置了一个固定的
px单位。 这是很普遍的做法,所以改变
html元素的字体大小时,可以使整个页面做相应调整 这样的话,它重写继承了用户设置的浏览器字体大小。但是,这剥削了用户自行调整以获得最佳视觉效果的能力。 如果您确实需要更改 html 元素的字体大小,那么就使用
em,
rem单位,这样根元素的值还会是用户浏览器字体大小的乘积。 这将允许您通过更改您的
html元素的字体大小,调整你的设计,但仍会保留用户的浏览器设置的效果。6、
em单位取决于一个
font-size值而非
html元素的字体大小。主要适用于: 设计组件比如按钮,菜单和标题可能会有自己明确的字体大小。 当你修改字体大小的时候,你希望整个组件都适当缩放。 通用属性这一准则将适用于在非默认字体大小的元素上的
padding、
margin、
width、
height和
line-height等值。 当您使用
em单位,他们使用的元素的字体大小应设置对
rem单位,以保留的可扩展性,但避免继承混淆。7、使用 em 单位:根据某个元素的字体大小做缩放而不是根元素的字体大小。一般来说,你需要使用
em单位的唯一原因是缩放没有默认字体大小的元素。根据我们上面的例子,设计组件比如按钮,菜单和标题可能会有自己明确的字体大小。 当你修改字体大小的时候,你希望整个组件都适当缩放。通用属性这一准则将适用于在非默认字体大小的元素上的
padding、
margin、
width、
height和
line-height等值。我建议,当您使用
em单位,他们使用的元素的字体大小应设置对
rem单位,以保留的可扩展性,但避免继承混淆。
通常不使用 em
单位控制字体大小
我们经常会看到使用em作为字体大小单位,特别是标题,当我认为如果使用
rem将更具可扩展性。标题经常使用
em单位的原因是他们相比
px单位,在相对常规文本大小方面更出色。 然而
rem单位同样也可以实现这一目标。 如果
html元素上任何字体大小调整,标题大小仍会缩放。 我们可以想到的例子是一个使用
em字体大小的下拉菜单,我们有第二个级别的菜单项文本大小取决于第一级字体大小。 另一个例子可能是用在按钮里面的字体图标,字体图标的大小跟按钮的文本大小有关。 然而,大多数 Web 设计中的元素往往不会有这种类型的要求,所以一般使用
rem单位的字体大小,
em单位只在特殊的情况下使用。8、这里理解的不到位,先记录下来。
始终使用 rem 单位做媒体查询
特别注意,当使用rem单位创建统一可扩展的设计,媒体查询也应该是
rem单位。 这将确保,无论用户浏览器的字体大小,您的媒体查询会对它作出反应和调整您的布局。例如,如果用户缩放文本非常高,您的布局可能需要从两列到单个列调整,因为它可能会在较小的移动设备上显示。如果您的断点在固定的像素宽度,只有不同的视口的大小可以触发它们。 但是基于
rem的断点他们将响应不同的字体大小9、
不要使用 em 或 rem的情况 :
多列布局
布局中的列宽通常应该是%,因此他们可以流畅适应无法预知大小的视区。然而单一列一般仍然应使用
rem值来设置最大宽度。
当元素应该是严格不可缩放的时候
在一个典型的 Web 设计的过程中,不会有很多部分的你不能使用伸缩性设计的布局。 不过偶尔你会遇到真的需要使用显式的固定的值,以防止缩放的元素。采用固定的尺寸值的前提应该是,如果被缩放的话,它的结构会被打碎。 这真的不常出现,所以你想拿出那些px单位之前,问问自己是否使用它们是绝对必要的。10、
总结
让我们以一个快速符号点概括我们介绍的内容:rem和
em单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
em单位基于使用他们的元素的字体大小。
rem单位基于
html元素的字体大小。
em单位可能受任何继承的父元素字体大小影响
rem单位可以从浏览器字体设置中继承字体大小。
使用
em单位应根据组件的字体大小而不是根元素的字体大小。
在不需要使用
em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用
rem。
使用
rem单位,除非你确定你需要
em单位,包括对字体大小。
媒体查询中使用
rem单位
不要在多列布局中使用
em或
rem,改用
%。
不要使用
em或
rem,除非缩放会不可避免地导致要打破布局元素。
相关文章推荐
- CSS 中 px,em和rem 的区别 学习笔记
- css学习笔记之px & em
- CSS 预处理 之 LESS 学习笔记(一)
- css学习笔记(3)图文混排 分级 鼠标
- CSS学习笔记-附加篇( CSS仿淘宝首页导航条按钮布局效果)
- XHTML+css,web标准学习笔记2——名字空间
- CSS入门学习笔记[1]
- Css学习笔记(一)
- CSS学习笔记一
- CSS入门学习笔记
- XHTML+css,web标准学习笔记1——DOCTYPE声明
- CSS学习笔记二
- CSS学习笔记--列表
- css学习笔记(5)动态定位 滤镜
- css学习笔记
- CSS学习笔记-附加篇(CSS的超级技巧)
- CSS学习笔记五
- CSS学习笔记 ---转
- CSS学习笔记
- 学习CSS&Div笔记(1)