前端像素单位之间的区别

前端像素单位之间的区别

一、简介:

随着Web的发展,对新的解决方案的需求也会继续增大,对网页的要求更高。网页设计单位是涉及到我们布局的效果,使用不同的单位会对最终的demo,会有影响。而且现在都是要求响应式设计,需要适配各种设备,电脑,手机,平板。如果单位不合适,可能在这个设备显示良好,那个设备就会打乱布局。所以需要我们选择合适的单位来进行开发,设计。在前端开发中,会遇到各种不同类型的长度单位,比如px,em,rem等。而整体的长度单位分为两大类:相对长度绝对长度

1.绝对长度

绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。

2.相对长度

相对长度都有一个基准

其中,px,em和rem用的较多。

em和rem
不同的是:

  • em 是相对于所在容器的font-size属性
  • rem是相对于整个html的font-size属性

二、详解:

1、px

1)px就是pixel的缩写,意为像素。
2)px就是设备或者图片最小的一个点,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像 素点,垂直方向是768个像素点。
3)px是我们网页设计常用的单位,也是基本单位。
4)通过px可以设置固定的布局或者元素大小。需要注意的是:px 的最小单位是1,所以小数的度量没有意义。
5)缺点:没有弹性。

2、rpx

1)rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。
2)rpx(responsive pixel): 可以根据屏幕宽度进行自适应。
3)微信小程序规定屏幕的宽度为750rpx。
4)解释:例如宽度,相当于把屏幕宽度分为750份,1份就是1rpx。高度类似~

3、em

1)参考物是父元素的font-size,具有继承的特点。
2)如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
3)特点是1. em的值并不是固定的; 2. em会继承父级元素的字体大小。是用来适配不同屏幕的,最终也会换算成px来进行布局因此对于精确度没有限制,
4)1em=1倍父元素font-size的值,2em=2倍父元素font-size的值,以此类推……

4、rem

1)rem是相对于根元素html,这样就意味着,我们只需要在根元素确定一个参考值,可以设计HTML为大小为10px,到时设置1.2rem就是12px.以此类推。
2)优点是,只需要设置根目录的大小就可以把整个页面的成比例的调好。用来适配不同屏幕的,最终也会换算成px来进行布局因此对于精确度没有限制,

5、%

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

6、vw

1)css3新单位,view width的简写,是指可视窗口的宽度。假如宽度是1200px的话。那100vw就是1200px,10vm就是120px,以此类推……
2)举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

7、vh

和vw相似
1)css3新单位,view height的简写,是指可视窗口的高度。假如高度是1200px的话。那100vh就是1200px,10vh就是120px,以此类推……
2)举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。

8、vm

1)css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子:浏览器高度2)2)900px,宽度1200px,取最小的浏览器高度,1 vm = 900px/100 = 9 px。
2)兼容性太差 ,不建议使用

三、常见问题

比如说,我根据rem乘以根元素font-size算出的px值有小数,最终是零点几px咋办,不同浏览器对这个支持程度不同,有的只渲染出零点几px对应的物理像素,有的干脆都显示1px,后果就是,同样的rem值,在不同dpr的设备上宽度不同,最常见的就是边框,有的设备上显得特宽,特别扭,也就是经典的1px边框问题。这个问题的解决方案也有很多,可以通过设置1px,然后根据不同dpr,设置不同的缩放来做,当然也有其他的方案。我这里只是想说rem带来的一些问题。

四、像素比和宽度比

像素比:dpr是设备像素比,也就是css的设备无关像素px和物理像素的比
宽度比:开发适配的设备的宽度(现在一般是iphone6),和实际的设备的宽度的比
总的来说,可以一句话来总结,像素比实现高清,宽度比实现适配

posted @ 2020-11-06 11:01  豆子V  阅读(982)  评论(0编辑  收藏  举报