五一前端专题二-响应式布局

常用解决方案

px和视口

px是一个相对单位，相对的是设备像素(device pixel)。

• 物理像素
  设备像素，在同一个设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。
• CSS像素
  由于不同的物理设备的物理像素的大小是不一样的，所以css认为浏览器应该对css中的像素进行调节，使得浏览器中 1css像素的大小在不同物理设备上看上去大小总是差不多 ，目的是为了保证阅读体验一致。
  默认情况下一个CSS像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个CSS像素等于了两个设备像素宽度。
• 视口
  (1) 布局视口（layout viewport），默认为980px。
  (2) 视觉视口（visual viewport）
  视觉视口表示浏览器内看到的网站的显示区域，用户可以通过缩放来查看网页的显示内容，从而改变视觉视口。
  (3) 理想视口（ideal viewport）

理想视口或者应该全称为“理想的布局视口”，在移动设备中就是指设备的分辨率。换句话说，理想视口或者说分辨率就是给定设备物理像素的情况下，最佳的“布局视口”。
1 CSS像素 = 物理像素／分辨率

媒体查询

媒体查询是向不同设备提供不同样式的一种方式，它为每种类型的用户提供了最佳的体验。
一套样式不行，给每一种设备各一套不同的样式

• 媒体类型（Media Type): all(全部)、screen(屏幕)、print(页面打印或打印预览模式)
• 媒体特性（Media features): width(渲染区宽度)、device-width(设备宽度)...
• Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)

用法

1. link标签引入
   media属性（eg：引入（screen）彩色屏幕显示，并且最大宽度不超过800px时候的CSS样式）

2. style中直接引入

@media print { ... }
@media screen, print { ... }
@media (max-width: 12450px) { ... }
@media screen and (min-width: 30em) and (orientation: landscape) { ... }

百分比

百分比单位缺点
（1）计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
（2）各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

自适应场景下的rem解决方案

与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。默认情况下，html元素的font-size为16px.

通过vw/vh来实现自适应

主要原理是两个等式
1）100vw = 屏幕物理宽度（750px-设计图宽度）=> 100/750 = 0.1333333vw = 1px
2）1rem = 1html字体大小 >= 12px（font-size最小值是12px）
1px = 0.1333333vw => 12px = 1.6vw => 40px = 40*0.1333333vw = 5.3333vw
结论：5.3333vw = 40px (设计图)
设置 html{ font-size: 5.3333vw; }
则：因为1 rem = 40 px(设计图) 所以 48px(设计图) = 48/40rem = 1.2rem

参考

响应式布局的常用解决方案对比-Github
使用媒体查询-MDN
CSS3之媒体查询（响应式布局）-CSDN