html移动端布局概念性准备以及相关单位

Day30
1、 媒体查询
媒体查询：由设备类型、检测设备特性表达式构成。

语法：
@media 设备类型[all\screen] and (条件表达式){
css样式
}

注：and两侧必须有空格
Not放在设备类型的前面（反向选择，排除某个范围）

媒体查询：做样式的微调
例如：
浮动
显示隐藏
文本大小
宽高

2、 移动端meta标签的设置
Meta标签的设置：视口1：1、禁止用户缩放

3、 ppi、dpi、dpr
ppi：每英寸所显示像素点的密度（ppi值越高，屏幕显示越清晰）
dpi：每英寸所显示像素点的个数

dpr：设备像素比例
dpr=物理像素（设计图ps中量取的像素大小）/逻辑像素（css设置的像素）

dpr获取：
根据UI设计图而定：

	如果设计图为640px/750px 选取dpr为2；
	如果手机耳机图为大于750px 选取dpr为3

4、 rem
rem相对大小：相对于html的font-size的值而定 默认1rem==16px；
rem布局（等比缩放）

计算流程
设计图为宽为750px;
考虑dpr为2
Ps中量出一个元素为88px；
设置css大小的时候 88px/dpr244px；
又因为不能固定44px（44px固定之后就不能放大或者是缩小）
所以44px转成rem
因为HTML中font-size:100px; 1rem100px；
44px == 0.44rem.

5、 vw
vw 视口的宽度的比例 100vw == 视口宽度的100%；

不常用：
Vh 视口高度的比例 100vh == 视口高度的100%；
Vmin 视口的宽和高进行比较 谁小用谁
Vmax 视口的宽和高进行比较 谁大用谁

6、 vw结合rem实现移动端的适配
为了方便rem的计算：
html设置font-size的值：100px;
1rem == 100px

出现问题：100px不会自动适配 
    找到一个能随着视口改变的单位 vw

下面需要研究的问题： 100px == ? vw  

–>