8.4知识点总结

一、媒体查询

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scake=1.0,minimum-sacle=1.0,user-scalable=no">

 initial-scale=1.0 初始缩放比例

maximun-scake=1.0 允许用户缩放到最小比例

minimum-sacle=1.0 允许用户缩放到最大比例

user-scalable=no 用户是否可以手动缩放 

二、布局方案

1、固定布局

以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；

2、可切换的固定布局

同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；

3、响应布局

对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：pc优先（从pc端开始向下设计）；移动优先（从移动端向上设计）；

4、弹性布局

以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；

5、混合布局

同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。

三、单位

1.px

2.em，根据最近的父元素的font-size计算

3.rem，根据跟标签html的font-size计算

4.vw，视窗宽度的百分比

5.vh，视窗高度的百分比

6.vmax，视窗宽高百分比较大值

7.vmin，视窗宽高百分比较小值

四、单位换算

1.html内

以640为例，应该是在320的屏幕上显示，dpr=2，

1vw=3.2px，html的font-size设置为100px，则100px里有多少个3.2就是多少vw

100/3.2=31.25vw

2.body内容的宽高转换比例设置

由于html的font-size=100px，所有1rem=100px，我们去测量得到的尺寸需要除以2才会在设备上显示dpr=2，所以测量时需要除以2再除以100（即除以200），所以px转换rem的转换比例设置为200