移动端布局

像素

像素是物理概念，指的是设备中使用的物理像素(Physic pixel)。这个单位用px表示，它是一个[相对绝对单位]
在同样一个设备上，每1个设备像素所代表的物理长度(如英寸)是固定不变的(即设备像素的绝对性);
在不同的设备之间，每1个设备像素所代表的物理长度(如英寸)是可以变化的(即设备像素的相对性);

CSS像素 - 设备独立像素

css 的像素是一个相对单位，受两点

1. 屏幕布局视口大小
2. 分辨率
   

可见，在两块不同的屏幕上面，相同的CSS像素，其展示效果一直，大小相等，但是其底层的物理像素点的个数会有较大的区别

像素比DPR，物理像素

不同于 pc ，移动设备屏幕尺寸限制，但分辨率却一直在提升。自从 iphone4 后推出的视网膜屏概念，在有限的屏幕上可以容纳更多的像素点，即 2 倍屏，3 倍屏。也就是说 1px 的 css 相当于 2 个物理像素

浏览器 像素比DPR window.devicePixelRatio = 物理像素 / css 总 px 像素点
console.log( window.devicePixelRatio ) // PC -> 1, mobel -> 2|3
而 css 中的 px 则是独立像素，故 1px = 2 物理像素

window.screen * window.devicePixelRatio = 

所以 1px 的边框移动端表现的并不是一个像素

meta 标签

mete 标签可以设置 html 的宽高，缩放比例。一般现在的 meta 标签由 vscode 一件生成

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

其中，content=""

em rem 百分比布局

百分比布局是根据设备宽高百分比去展示，以保证在横向上与预期效果一致。如

.box
	width 49%

但是百分比在垂直方向上不可控，比如像 pad 横屏时，横向比竖向长，如果竖向百分比后很可能不是预期效果，再比如一个很长的设备，相同的百分比在纵向的会长很多

---

em 是针对自身 font-size，而不是父元素。因为 font-size 可以继承，所以有时表现的和 父元素相关
但是由于 em 正向关于 font-size，所以变得不确定，每次使用 em 时需要计算，很麻烦

style
  .box
  	font-size 20px
  	height 10em
    .son
      font-size 40px
      height 5em

rem 则是 root em，针对 html 设置固定的 font-size 值，所以现在我们一般会用 rem 布局