这是我参与【第五届青训营】伴学笔记创作活动的第八天。

1.长度单位

像素
我们先来看下某度上关于像素的介绍：

像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现的样子。
可以将像素视为整个图像中不可分割的单位或者是元素。不可分割的意思是它不能够再切割成更小抑或是元素，它是以一个单一颜色的小格存在。每一个点阵图像包含了一定量的像素，这些像素决定图像在屏幕上所呈现的大小

也就是说，显示器屏幕实际上是由一个一个的小点构成的。

问题一：像素和分辨率有什么关系呢?

分辨率=水平方向像素*垂直方向像素

屏幕分辨率

例如：屏幕分辨率是1920X1080，则该屏幕水平方向有1920个像素，垂直方向有1080个像素

• 不同屏幕的像素大小是不同的，也就是说像素大小不像我们现行的长度单位(如米/m)那样有着固定的国际标准
• 所以同样的像素大小在不同的设备上显示效果是不一样的，像素越小的屏幕显示的效果越清晰
  

图像分辨率

例如:一张图片分辨率是300X200，则该图片在屏幕上按1：1缩放时，水平方向上有300个像素，垂直方向上有200个像素点

• 图像分辨率越高，1：1缩放时面积越大
  
• 图片分辨率越低，1：1缩放时面积越小
  

同一台设备像素大小是不变的，那把图片放大超过100%是占的像素点就多了，但是图像也变得模糊

问题二：屏幕实现图片放大或缩小的原理是什么呢？

• 其实是设备通过算法对图像进行了像素补足；
• 同理，把图片按小于100%缩放时，也是通过算法将图片像素减少
  

百分比

也可以将属性设置为相对于其父元素属性的百分比，可以使子元素跟随父元素(暂且先理解成父元素） 的改变而改变。

em

em是相对于元素的字体大小来计算的，

1em= < self >.font-size

也就是说em值会根据元素本身的字体大小的改变而改变

rem

rem是相对于根元素的字体大小来计算，

1em=< root >.font.size

也就说em值后根据根元素的字体大小的改变而改变

<style>
  * {
    font-size: 24px;
  }

  .box1 {
    width: 200px;
    height: 200px;
    background-color: orange;
  }

  .box2 {
    width: 50%;
    height: 50%;
    background-color: aqua;
  }

  .box3 {
    font-size: 20px;
    width: 10em;
    height: 10em;
    background-color: greenyellow;
  }

  .box4 {
    font-size: 20px;
    width: 10rem; /*当时用rem时，不管怎么改本元素的font-size都是不会变的。需要定义root元素的font-size才可以 */
    height: 10rem;
    background-color: red;
  }
</style>

<div class="box1">
  <div class="box2"></div>
</div>

<div class="box3"></div>

<div class="box4"></div>