1、em、rem和px的使用场景
在前端制作中，最常用到的单位就是固定单位px和相对单位em、rem，那么他们的区别是什么？又分别使用在什么地方？下面我来详细地讲一下：
1.em：em通常用于依赖字号的元素属性上，比如margin、padding、width、height等元素；
2.rem：root em的缩写，通常用于font-size字号的设置上；
3.px：通常用于边框宽度border的设置上。
其中需要注意的是，em是根据它的父级来改变大小而rem只会随着root根元素的大小来改变，使用的时候需要多加注意。
在做嵌套的时候，如果用em来设置字号大小，当小于1em的时候，字号会逐级缩小，当大于1em的时候，字号会逐级放大，所以在设置字号的时候，一定要使用rem来设置。下面我用em和rem做了个简单的响应式案例，演示案例如下：
<style>:root {font-size: 0.7em;}.news {background-color: #ccc;border: #000 solid 1px;padding: 1em;margin: 1em;}.news h2 {font-size: 3rem;}.news1 {font-size: 1.25rem;text-indent: 2em;}</style></head><body><div class="news"><h2>实时：拜登暂时领先特朗普11张选举人票，还有9州结果未出</h2><div class="news1"><p>当地时间11月3日，美国大选迎来正式投票日。当前，东部各州投票站已关闭，中部、西部部分地区的现场投票仍在进行中。与此同时，各州开始了选票统计工作，结果正陆续出炉。截至发稿时，现任美国总统、共和党总统候选人特朗普赢得西弗吉尼亚州等23个州共212张选举人票。前副总统、民主党总统候选人拜登则拿下伊利诺伊州等19个州共223张选举人票。当前，还有9个州的最终统计结果没有公布。据美联社（AP）实时票数统计，特朗普赢得西弗吉尼亚州（5张选举人票）、肯塔基州（8张）、田纳西州（11张）、阿肯色州（6张）、密西西比州（6张）、亚拉巴马州（9张）、俄克拉荷马州（7张）、南卡罗来纳州（9张）、印第安纳州（11张）、怀俄明州（3张）、内布拉斯加州（3张）、南达科他州（3张）、北达科他州（3张）、路易斯安那州（8张）、堪萨斯州（6张）、密苏里州（10张）、爱达荷州（4张）、犹他州（6张）、蒙大拿州（3张）、俄亥俄州（18张）、爱荷华州（6张）、佛罗里达州（29张）、得克萨斯州（38张）共212票。拜登则拿下伊利诺伊州（20张）、弗吉尼亚州（13张）、马里兰州（10张）、特拉华州（3张）、新泽西州（14张）、康涅狄格州（7张）、罗德岛州（4张）、马萨诸塞州（11张）、佛蒙特州（3张）、新墨西哥州（5张）、纽约州（29张）、华盛顿特区（3张）、科罗拉多州（9张）、新罕布什尔州（4张）、华盛顿州（12张）、俄勒冈州（7张）、加利福尼亚州（55张）、夏威夷州（4张）、明尼苏达州（10张）共223票。美国大选中的538张选举人票共包括了435张众议院代表选票，100张参议院代表选票，以及3张华盛顿特区选票。拿下270票及以上的候选人将赢得大选。</p></div></div>
电脑桌面异常乱，请无视
2、vw、vh的初步认识.
在制作响应式布局的时候还有一些不能忽略的元素属性，那就是vw、vh以及vmin、vmax。它们常用于移动端的布局之中。他们分别有什么作用呢？下面给我来详细说一下：
1、vw：表示视口的宽度，我们把视口分成100份，1vw就表示当前视口宽度的百分之一；
2、vh：表示视口的高度，1vh就表示当前视口高度的百分之一；
3、vmin：表示在vw与vh中取最小值；
4、vmax：表示在vw与vh中取最大值。
补充：什么是视口？视口就是当前文档的可视区域（我们浏览器所能看到的区域），就称为视口。
下面用vw、wh来做一个三行单列的布局，演示如下：
<style>* {margin: 0;padding: 0;box-sizing: border-box;text-align: center;}:root {font-size: 1.5rem;}.header {width: 100vw;height: 20vh;background-color: rgb(255, 238, 0);}.maim {width: 100vw;height: 50vh;background-color: lightcoral;}.footer {width: 100vw;height: 30vh;background-color: lightskyblue;}</style></head><body><div class="header">导航</div><div class="maim">内容</div><div class="footer">底部</div></body>
