文章详细介绍了像素作为图像基本单元的概念，以及在CSS中不同单位如px,em,rem,vw,vh的用法和特点。px是固定大小，em和rem基于字体大小，vw和vh相对于视口尺寸，rpx在微信小程序中用于屏幕宽度自适应。
像素px
像素是组成图象的最基本单元要素：点。
将上图放大，可以看到图片是由一个一个不可再分割的点构成，即为像素点。
电脑屏幕实际上就是由一个一个像素点构成的。不同显示器的像素大小也不同，屏幕越大，像素越小，视觉效果越好。
在实际开发中，如果设置字体长度为20px，那么字体就占该屏幕的20个像素点（操作系统未设置缩放文本的情况下）。
%
相对父元素大小（px也可以理解成相对于显示器大小，因为不同显示器像素并非唯一）。
这里设置了外层父盒子的宽高为200px，内层子盒子的宽高为50%，可以明显看出，子盒子所占宽高即为父盒子的一半。当改变父盒子大小时，子盒子大小也会随之改变，这是%的灵活之处。但是，如果父盒子未设置高度，给子盒子高度设置为%是无效的。
em
相对于元素的字体大小(2em 表示当前字体大小的 2 倍）
css
.box {
width: 2em;
height: 200px;
font-size: 16px;
background-color: rgb(190, 155, 243);
}
html
<div class="box">长度单位</div>将盒子宽度设置为2em，就是当前元素字体的2倍大小，即32px。当字体大小发生改变时，宽度也会随之变化，这是em的灵活之处。
rem
相对于根元素的字体大小,根元素即为html标签
<html lang="en" style="font-size:24px;">
...
<style>
.box {
width: 2rem;
height: 200px;
font-size: 12px;
background-color: rgb(190, 155, 243);
}
</style>
...
<div class="box">长度单位</div>
...
</html>将盒子宽度设置为2rem，就是根元素字体的2倍大小，即48px。当根元素字体大小发生改变时，宽度也会随之变化，这是rem的灵活之处。
vw
相对于视口的宽度，vw可以根据视口的宽度自动改变大小，1vw是视口宽度的1%
视口代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等——即指你正在浏览的文档的那一部分。
vh
相对于视口的高度，vh可以根据视口的高度自动改变大小，1vh是视口高度的1%
利用vw或vh实现自适应正方形：
css
.box {
width: 15vw;
height: 15vw;
background-color: rgb(190, 155, 243);
}
html
<div class="box"></div>将盒子的宽高都设置为15vw，相当于视口宽度的15%，当放大或缩小网页时，正方形的宽高会等于不断变化的网页宽度*15%，呈现自适应效果。
rpx
微信小程序中css的尺寸单位，可以根据屏幕宽度自适应，规定屏幕宽为750rpx。理解为将屏幕宽度划分为750份，一份是1rpx。因为不同设备型号的宽度不同，它们的rpx也会不同
iPhone6
iPhone6 Plus
综上rpx可以完美的实现宽度自适应
扫一扫
1069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
