4月15日移动端布局（媒体查询及响应式 + rem）

媒体查询：由设备类型、监测设备特性表达式构成。
语法：
@media 设备类型[all\screen] and (条件表达式){
css样式
}
注：and两侧必须有空格
not放在设备类型的前面（反向选择【排除某个范围】）
媒体查询：做样式微小调整
例如：
浮动
显示隐藏
文本大小
宽高
meta标签的设置：视口1：1比例、禁止用户缩放
Retina屏 视网膜高清显示屏
ppi : 每英寸所显示像素点的密度 （ ppi值越高 屏幕显示越清晰 ）
dpi : 每英寸所显示像素点的个数
dpr : 设备像素比例。
dpr == 物理像素（把手机上图片截图放在ps中量取的大小） / 逻辑像素（css去设置的像素）
dpr怎么获取：
根据UI设计图而定：绝大部分拿到的设计图的大小 750px/640px/
针对性对dpr进行获取：
如果设计图为640px 或者 750px 选取dpr 2
如果设计图为大于750px 选取dpr为 3
适用于iphone6/7/8
单位：
px
%
deg
pt
em

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

计算流程：
假如：设计图为750px
考虑dpr为 2
ps中量出一个元素为88px
设置css大小的时候 88px / dpr2 == 44px;
又因为 不能固定44px ( 44px固定之后就不能放大或者是缩小 )
所有 44px 转成 rem
因为 html中font-size:100px; 1rem == 100px;
44px == 0.44rem

vw ： 视口的宽的比例 100vw == 视口宽度的100%
vh ： 视口高度的比例 100vh == 视口高度的100%
vmin : 视口的宽和高进行比较 谁小我用谁
vmax ： 视口的宽和高进行比较 谁大我用谁
为了方便rem的计算：
html设置font-size的值：100px;
1rem == 100px
出现问题：100px不会自动适配
找到一个能随着视口改变的单位 vw

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

根据设计图先确定适配的核心设备。

第一种情况：设计图为640px
    设计图640px 考虑dpr 为2
    640px / 2 == 320px 
    视口的宽 320px
    100vw == 320px
    1vw == 3.2px
    ?vw == 100px
    31.25vw == 100px;

第二种情况：设计图为750px;
    设计图为750px   考虑dpr为2
    750px / 2 == 375px;
    视口的宽 375px;
    100vw == 375px;
    1vw = 3.75px;
    ?vw == 100px;
    26.67vw == 100px;

记住：
如果设计图为640px html的font-size值为31.25vw;
如果设计图为750px html的font-size值为26.67vw;
rem算法：
rem的原理：根据html的font-size的值进行确定。
例如html font-size值 为100px 1rem == 100px;
为了方便计算 html的font-size值 设置成100px
设置流程：
a :
看设计图的尺寸！
如果设计图为640 / 750 dpr 2
如果大于750px dpr 3
b :
设计图为750px
例如从设计图量出的大小为88px
88px / dpr(2) == 44px;
44px 转成rem .44rem ;
存在问题：
html设置font-size:100px ;
为了给rem做一个比例
但是考虑设备的适配。
只要设备发生改变，html的font-size值也改变则能做自动适配。
但是现在用的单位为 100px px单位 不能随着宽口发生改变。
所有我们继续寻找一个 能跟随设备改变的单位。
vw结合rem 计算流程 :
量出header的height 为88px
考虑dpr 为 2
88px / 2 == 44px
44px 转成rem
44px / 100px == 0.44rem;
今天老师带领我们学习新课程， rem算法：设置流程：存在问题：meta标签的设置：视口1：1比例、禁止用户缩放 dpr怎么获取：font-size：cala(), 感觉老师讲的太快了，基础太差有些跟不上，前几天外出办事课程跟不上了，听不懂老师讲的了有点怀疑人生了。希望能从头再学一遍多给些练习的时间。老师的期望太高了，我现在只停留在能听懂的阶段，只能比着老师的案例写，问题也归纳不出来，只感觉脑子里一团浆糊。虽然也能听得懂， 但是思维逻辑跟不上，案例转换方面不灵活老师一往深里讲就犯晕。到自己单独作的时候，却是有一种无从下手的感觉。也不知道能不能学会这一行，心理也是有一点担忧。只能硬着头皮学下去实在不行的话就留级，好想线下上课主要是家里有琐事打扰，想要全身心投入学习中！因为我想要改变以后的生活，不得不砥砺前行。