2020.0415媒体查询%移动端meta标签￥设备像素比

知识总结

一、媒体查询
媒体查询:由设备类型、检测设备特性表达式构成。
语法:@media 设备类型[all\screen] and (条件表达式){
Css样式
}
注：and两侧必须加空格
Not放在设备类型前面，意思是反向选择[排除某个范围]
媒体查询的用法：用来做微小调整，比如浮动、显示隐藏、文本大小、宽高。
二、移动端meta标签设置

作用：让视口1:1比例，禁止用户缩放。

三、设备像素比dpr

Retina屏 视网膜高清显示
Ppi:每英寸所显示像素点的密度(ppi值越高，屏幕显示越清晰)
Dpi:每英寸所显示像素点的个数
Dpr:设备像素比例。
Dpr==物理像素(把手机图片截图放在ps中量取大小)/逻辑像素(css去设置的像素)
Dpr怎么获取:
根据UI设计图而定:绝大部分拿到的设计图的大小750px/640px
针对性对dpr获取:
如果设计图为640px或者750px，选取dpr为2，
如果设计图为大于750px，选取dpr为3。

四、移动端单位rem
单位:rem
Rem相对大小:相对于html的font-size的值而定，默认1rem==16px

Rem布局(等比缩放)
Rem计算流程:
假如:设计图为750px
考虑dpr为2
Ps中量出一个元素为88px
设置css大小的时候，88px/dpr2==44px;

           又因为不能固定44px(44px固定后就不能放大或缩小)          所以44px转成rem
           因为html中font-size:100px;1rem==100px;
           所以44px==0.44rem；

五、Vw
Vw:视口的宽的比例 100vw==视口宽度的100%

    Vh:视口高度的比例  100vh==视口高度的100%
    
    Vmin:视口的宽和高作比较，谁小我用谁
    
    Vmax:视口的宽和高作比较，谁大我用谁   

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

   出现问题:100px不会自动适配
           找到一个能随着视口改变的单位 vw
   下面需要研究的问题:100px==？Vw
    根据设计图先确定适配的核心设备。
    第一种情况:设计图为640px
           设计图640px，考虑dpr为2
            640px/2==320px
            100vw==320px
            1vw=3.2px
            ？Vw=100px
          31.25vw=100px
  第二种情况:设计图为750px
           设计图为750px，考虑dpr为2
           750px/2==375px
           100vw=375px
           1vw=3.75px
           ？Vw=100px
           26.67vw=100px

记住:如果设计图为640px，HTML的font-size值为31.25px
如果设计图为750px，html的font-size值为26.67vw