px、em、rem、%、vw、vh、vm这些单位的区别

2018-5-9 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

1.背景介绍


我们为什么要选择合适的网页设计单位


随着Web的发展,对新的解决方案的需求也会继续增大,对网页的要求更高。


网页设计单位是涉及到我们布局的效果,使用不同的单位会对最终的demo,会有影响。


现在都是要求响应式设计,需要适配各种设备,电脑,手机,平板。如果单位不合适,可能在这个设备显示良好,那个设备就会打乱布局。


所以需要我们选择合适的单位来进行开发,设计。
2.知识剖析


1、px


px就是pixel的缩写,意为像素。px就是设备或者图片最小的一个点,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。


是我们网页设计常用的单位,也是基本单位。通过px可以设置固定的布局或者元素大小,缺点是没有弹性。


特点是1. em的值并不是固定的; 2. em会继承父级元素的字体大小。




2、em


参考物是父元素的font-size,具有继承的特点。如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
特点是1. em的值并不是固定的; 2. em会继承父级元素的字体大小。
3、rem


rem是相对于根元素html,这样就意味着,我们只需要在根元素确定一个参考值,可以设计HTML为大小为10px,到时设置1.2rem就是12px.以此类推。


优点是,只需要设置根目录的大小就可以把整个页面的成比例的调好。


4、%


一般来说就是相对于父元素的,


1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于ViewPort(可视窗口),
5、vw


css3新单位,view width的简写,是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px


举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。


6、vh


css3新单位,view height的简写,是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px


举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。


7、vm


css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子:浏览器高度900px,宽度1200px,取最小的浏览器高度,1 vm = 900px/100 = 9 px。


兼容性太差 ,现在基本上没人用,我试了一下Chrome就用不了。


3.常见问题


假如使用em来设置文字大小要注意什么?


4.解决方案


注意父元素的字体大小,因为em是根据父元素的大小来设置的。比如同样是1.5em,要是父元素是20,那1.5em就是30px.要是父元素是30px,1.5em就是45px.


特别是在多重div嵌套里面更要注意。


5.扩展思考


css还有哪些长度单位?


in:寸


cm:厘米


mm:毫米


t:point,大约1/72寸


pc:pica,大约6pt,1/6寸


6.更多问题
1.pc pt ch一般用在什么场景?
这些我们网页设计基本上用不到,在排版上会有用处。


2.如何使 1rem=10px
在设置HTML{font-size:62.5%;}即可


3.如果父元素没有指定高度,那么子元素的百分比的高度是多少?
会按照子元素的实际高度,设置百分比已经没有效果了。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


标签: px、em、rem、%、vw、vh、vm这些单位的区别


Powered by emlog 京ICP备12006971号-1 sitemap