px特点
1.常用于pc网页布局
2.因大部分pc端网页皆为1920px
3.适用于ie678
px像素（Pixel）其实也是一种相对长度单位，像素px是相对于显示器屏幕分辨率而言的。（引自CSS2.0手册）
为什么要使用em和rem？
使用 em 和 rem 单位可以让我们的设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。 我们可以使用这种灵活性，使我们在开发期间，能更加快速灵活的调整，允许浏览器用户调整浏览器大小来达到最佳体验。
em特点
1.em的值不是固定的；
2.em会继承父级元素
使用em单位时，像素值是将em值乘以使用em单位的元素的字体大小。
有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。 事实上，根据W3标准 ，它们是相对于使用em单位的元素的字体大小。
例：
<style>
.box {
font-size: 14px;
}
.red {
font-size: 20px;//添加前正方形为140*140添加后为200*200
width: 10em;
height: 10em;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="red"></div>
</div>
</body>em由于会根据继承和自身属性不断调整，现已不常用于布局
rem特点
rem是由当前网页html元素的字体大小决定的（相对单位）。
1 rem = 1个HTML的字体大小 （必须是html的字体大小）
使用rem
1.直接根据当前html的字体（默认为16px 可以在css中和浏览器设置中更改）
若想根据rem进行移动适配
则在不同宽度下给其相应的html字体值（一般采用屏幕的1/10）一般用于移动端
2.媒体查询
@media（width:375px）{
html {
font-size:（375 / 10）px; //只能在less里这么写，css不支持数学写法
}
}
3.使用js插件（flexible.js）
<script src = "./js/flexible.js"></script>
引入插件 它会根据当前屏幕的宽度 自动将其html字体转换为屏幕宽的十分之一
实际开发
在less文件定义一个：
@rem ：37.5rem;(在设计稿宽度为375px的前提下)
接下来的设计稿中宽度为100px的元素为：（100 / @rem);
vw和vh
vw和vh表示当前视口宽/高的 1 / 100
vw：如10vw的意思是视窗宽度的 10%。vh：如3vh的意思是视窗高度的 3%。vmin：如70vmin的意思是视窗的高度和宽度中较小一个的 70%。vmax：如100vmax的意思是视窗的高度和宽度中较大一个的 100%
优点是无需预设html文字大小 ；可直接使用
缺点是兼容性不如rem
rem：
vw:
1409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
