像素单位的区别。
发布网友
发布时间:2023-01-05 12:53
我来回答
共1个回答
热心网友
时间:2023-07-18 17:35
大家好,我是IT修真院萌新分院的王寒,一枚正直,纯洁,善良的前端程序员。
1.背景介绍
传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,并且拥有比较良好的兼容性。但是你知道吗?从css3开始,浏览器对逻辑单位的支持又提升到了另外一个境界,增加了rem、vh、vw、vm等一些新的长度单位,我们可以利用这些新的单位开发出比较良好的响应式页面,随之覆盖多种不同分辨率的终端,包括移动设备等。现在让我们来看下这些长度单位有什么区别。
2.知识剖析
1、px
px就是pixel的缩写,意为像素。px就是一张图片最小的一个点,一张位图就是千千万万的这样的点构成的,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。
2、em
参考物是父元素的font-size,具有继承的特点。如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
3、rem
css3新单位,相对于根元素html(网页)的font-size,不会像em那样,依赖于父元素的字体大小,而造成混乱。
4、%
一般宽泛的讲是相对于父元素,但是并不是十分准确。 1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于ViewPort(可视窗口)
5、vw
css3新单位,viewpoint width的缩写,视窗宽度,1vw等于视窗宽度的1%。 举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
6、vh
css3新单位,viewpoint height的缩写,视窗高度,1vh等于视窗高度的1%。 举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。
7、vm
css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子:浏览器高度900px,宽度1200px,取最小的浏览器高度,1 vm = 900px/100 = 9 px。
3.常见问题
vh vw vm实际应用场景?
4.解决方案
vh vw是不包含页面滚动条的视窗宽度(innerwidth),%包含了滚动条的宽度在里面了(outerwidth)。 一般的情况下%就可以满足大部分自适应设计的需求,可以用height:100vh做一个高度占满屏幕的自适应,没有滚动条。 用vw,vh设定的大小只和视窗大小有关,所以用来开发多种屏幕设备的应用用这个单位还是挺合适的。
5.编码实战
6.扩展思考
css还有哪些长度单位?
in:寸
cm:厘米
mm:毫米
t:point,大约1/72寸
pc:pica,大约6pt,1/6寸
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
7.参考文献
PX、EM、REM、%、VW、VH、VM等单位有什么区别?
8.更多讨论
css中font-size的单位有px、em、pt 用哪个哪个最好 ?
剖析
鸣谢
感谢大家观看
By 王寒
小课堂问题:
1.详解vm。
答案: 请点击 。
2.这些单位都是在什么情况下使用?
答案: 请点击 。
3.使用px的优点和缺点?
答案: 请点击 。