简单搞懂px、em、rem、vw、vh、%、scale一说到在响应式，就不可避免的涉及到px,em, rem,vw,vh

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

一说到在响应式，就不可避免的涉及到px,em, rem,vw,vh,%这几个单位，同时还有transform属性的scale()方法,今天来好好学习一下。

先有个认识

px

px全称Pixel，中文意思为像素，也是我们最熟悉的一个单位；它用来表示图片或者图形的最小单位，是一个相对参数，在不同的分辨率下是不同的（所以像素是和分辨率有关的，和缩放是没有关系的），像素是一个一个小方格，也就叫像素点。

 <div style="font-size: 32px">这是px设置的字体,font-size: 32px</div>

说到像素就免不了提一下分辨率，分辨率又称解析度、解像度，在细分可分为显示分辨率、图片分辨率、打印分辨率和扫描分辨率等；

显示分辨率--显示器所有可视面积上水平像素和垂直像素的数量，分辨率越高，显示屏可显示的像素就越多；常说的4k(3840×2160)分辨率、8K(7680×4320)分辨率，指的就是显示分辨率,也就是显示器能放这么多像素；
图片分辨率--图像中所储存的信息量，即每英寸图像中有多少个像素点，单位为PPI(像素每英尺)，一般用于PS，改变图像的清晰度如果图片的分辨率大于显示的分辨率，就会出现局部显示，或者压缩显示；

所以如果一个帅哥告诉你他的屏幕像素是1920✖1080的，那你就应该知道他说的不是屏幕的长宽，而是屏幕能放1920✖1080个像素点；如果另一个帅哥告诉你这张图片像素是640✖480，那你就应该知道他说的不是图片的长宽，而是这个图片包含了640✖480个像素。

em

em是相对长度单位，相对于当前对象内文本的字体尺寸；如果当前对象内文本的字体尺寸未人为设置，则相对于浏览器的默认字体尺寸；一般为16px；

em 的值并不是固定的

em 会继承父级元素的字体大小

    p {
      width: 2em;
      height: 2em;
      font-size: 20px;
    }
// p 的宽高都为40px  它参照的是自身字体大小

  div {
      font-size: 10px;

      p {
        width: 2em;
        height: 2em
      }
    }
// p 的宽高都为20px  如果自身没有设置字体，那么会继承父元素的

 <div style="font-size: 32px;">
   <div style="font-size: 1em">这是em设置的字体,font-size:1em,父级font-size: 32px</div>
 </div>

注：为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px。这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的px 数值除以 10，然后换上 em作为单位就行了。

rem

rem是相对长度单位，根据页面的根节点的字体尺寸进行单位转换；浏览器的默认字体尺寸为16px;通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应

 <div style="font-size: 2rem">这是rem设置的字体,font-size:2rem</div>

同理，如果想要简化font-size的转化，我们可以在根元素html中加入font-size: 62.5%

vw（Viewport Width）

vw是相对长度单位，相对于视口的宽度，视口会被均分为100单位的vw；比如浏览器的宽度为1920px,则1vw=1920px/100=19.2px；不需要JS和CSS耦合在一起的单位

vh（Viewport Height）

vh是相对长度单位，相对于视口的高度，视口会被均分为100单位的vh；比如浏览器的宽度为1920px,则1vw=1080px/100=10.8px；不需要JS和CSS耦合在一起的单位

 <div style="background-color: red;width: 50vw;height: 50vh;"></div>

%

%(百分比)是相对长度单位，相对于包含块的高宽或字体大小来取值；关于包含块（containing block）的概念，不能简单地理解成是父元素。

如果是静态定位和相对定位，包含块一般就是其父元素。

  <div style="width: 1080px;height: 1920px;">
    <div style="width: 10%;height: 10%;background-color: red;"></div>
  </div>

如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。

 <div style="width: 1080px;height: 500px; position: relative;">
    <div style=" position: absolute;width: 10%;height: 10%;background-color: red;"></div>
  </div>
 <div style=" position: absolute;width: 10%;height: 10%;background-color: green;"></div>

如果是固定定位的元素，它的包含块是视口（viewport）

  <div style="width: 100px;height: 100px;">
    <div style="position: fixed;width: 10%;height: 10%;background-color: blue;"></div>
  </div>

scale()

scale()是transform属性上的一個方法，可以实现元素的缩放效果。

transform: scaleX()--沿x轴方向缩放
transform: scaleY()--沿y轴方向缩放
transform: scale()--沿x轴和y轴同时缩放

 <div style="width: 100px;height: 100px;background-color: red; transform: scale(10);"></div>

有什么缺点

通过上面的认识，我们已经知道了各自的特点，那在使用过程中应该如何选择；

px--固定值，不能响应式。
em--计算复杂，因为字体大小的计算不仅要考虑自身的大小有没有设置，还要考虑父元素字体的代销甚至是父元素的父元素的大小；在嵌套的时候比较复杂；
rem--因为都是根据根节点去计算大小的，所以缺少一些个性化
vw、vh--不能十分精准的换算，1px、较小的像素不好适配
%--宽高太小引起的内容溢出;宽高过大引起的内容之间的间距太大
scale--当缩放比例过大时候，字体会有一点点模糊，就一点点；事件热区会偏移,就是鼠标坐标点这些会稍微有点问题

应用选择

px--通常用于边框宽度的border的设置上比较好
em--通常用于依赖字体尺寸的元素属性上，比如width、height、marign、padding等元素，也就是元素字体尺寸变化，其他属性也需要跟着变化的情况
rem--除了以上两种情况都可以使用rem，这样整体都会协调
vw、vh--多种设备时推荐使用,常用于移动端的布局之中;喜欢用这个
%--简单场景可使用
scale--在适配大屏上实现缩放效果很好，放心使用

总结

随着数据大屏适配的需求越来越多，掌握这些简单又核心的知识是必不可少的。如果你看到这里了，烦请大佬点个赞，鼓励小弟学习，不胜感激，谢谢。