rem，em,px的区别

px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。IE无法调整那些使用px作为单位的字体大小

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。

那么12px=0.75em,10px=0.625em

如果在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

EM

em的值并不是固定的,会继承父级元素的字体大小。

避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

rem

rem是CSS3新增的一个相对单位，这个单位与em的区别在于：rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

如兼容性写法

p {font-size:14px; font-size:.875rem;}

国内应该是rem应用比较广泛，尤其是支持响应式布局的H5页面，如【淘宝触屏版】

在页面width>=540时，html的font-size为54，否则font-size等于width/10;

540的情况

小于540，如350

页面代码

页面还考虑了屏占比，如屏占比为2，font-size再在原结果乘上2，屏占比是其它值类似

rem，em,px的区别相关推荐

rem,em,px,rpx等
1.任意浏览器的默认字体高都是16px.谷歌浏览器显示的最小字体大小是12px. exp:突破谷歌浏览器显示12px限制. (1).<div>文本</div> 文本嵌套块标签, ...
px rem em rpx 区别用法
任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择 ...
chrome控制台如何把vw显示成px_【CSS】rem，em，px的区别和使用场景
前端潮咖点击上面蓝字,关注我们! 关注关注前端潮咖,每日精选好文作者:大前端小菜鸟来源:cnblogs.com/hyns/p/12380944.html 作rem布局原理深度理解(以及em/v ...
chrome控制台如何把vw显示成px_【CSS】679 rem，em，px的区别和使用场景
作者:大前端小菜鸟来源: cnblogs.com/hyns/p/12380944.html 作rem布局原理深度理解(以及em/vw/vh) 一.前言我们h5项目终端适配采用的是淘宝那套<Fl ...
7、em/px/rem/vh/vw区别？
简介 em/px/rem/vh/vw都属于css的单位,这些单位可以分为相对单位,绝对单位 px:绝对单位,网页按照精确像素来显示 em:相对单位,相对自身定义的font-size来计算,自身没有设置 ...
em px 简单换算
大部分的网页设计者在CSS代码编写中总是先对整体定义字体尺寸,中文情况下一般为12px,而其实这样以来在通过IE顶部菜单中的"察看-文字大小"设置已无任何作用.对字体感觉太小的浏 ...
Vue进阶（幺柒零）：前端用户体验提升（四）应用 rem/em 实现字体自适应
文章目录一.前言二.em 继承的例子三.实际应用 3.1 使用 em 单位 3.2 通常不使用 em 单位控制字体大小四.使用 rem 单位五.小贴士 5.1 始终使用 rem 单位做媒体查 ...
html中rem单位的转换,rem换算(rem与px换算工具)
哪位大神,能告诉我,rem和px是怎么换算的?然后怎样用rem布局??我就. 需要自己设置,一般是1rem=14px,单位和px的布局是一样的,只是单位不同而已,所以不必纠结 px像素(Pixel). ...
css rem和px换算,移动端的vw px rem之间换算
一.vw px rem em是什么 1.vw:就是相对视口宽度(Viewport Width).1vw = 1% * 视口宽度.也就是说,一个视口就是100vw. 2.px:px应该是在css中使用最 ...

rem，em,px的区别

px

EM

rem

rem，em,px的区别相关推荐

最新文章

热门文章