逆战班 移动端布局-vw布局

视口:

浏览器显示页面内容的屏幕区域 
视口分为: 布局视口  视觉视口 理想视口   
 布局视口:
                一般移动端设备的浏览器都默认设置了一个布局视口,为了解决早期pc端页面在移动端上的显示问题
                苹果 安卓 基本上设置这个视口的分辨率980px
视觉视口:
                你看到的网页区域,指的是网址的区域
                通过缩放去操作视觉视口不会影响布局视口
理想视口:
                1: 是网站在移动设备的浏览器中最理想的一状态(浏览和阅读宽度设定的)
                2: 对设备来说就是最理想的尺寸
                3: 引入一个meta标签,通知浏览器进行对应的操作
                4: meta标签的主要目的就是为了使布局视口的宽度应该与理想窗口的宽度一致,就是设备有多宽,布局视口就有多宽
                <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
                width=device-width 当前的宽度与当前设备的宽度一致
                initial-scale=1  初始的缩放比例(默认为1)
                minimum-scale=1 允许用户缩放到的最小比例(默认为1)
                maximum-scale=1 允许用户缩放到的最大比例(默认为1)
                user-scalable=no 用户是否可以手动缩放(默认不允许) 因为我们不希望用户去放大缩小页面
                注意: 移动端必须写meta标签,且是禁止用户缩放
视口缩放: 
            在375px的设备中截图出来 到ps 中测量是750px
            在ps中值比 设备中的px值大一倍
             
物理像素:
                1:指的就是屏幕像是的最小的点,是真实存在,设备厂商在生产设备是就已经固定好了的,比如苹果678 750*1334
                2: 视网膜高清显示屏,retina显示屏,作用是把更多的物理像素点压缩至一块屏幕里,像素点越密集,看得越清晰,达到更高的分辨,提高画质
                 
        了解: ppi: 每英寸所显示的像素点的密度
                 dpi: 每英寸所显示的像素点的点数
         
重点:
            物理像素比: dpr = 物理像素 / 逻辑像素
            物理像素:就是设备所显示的像素(手机截图 在ps中量取出来的像素大小)
            逻辑像素: 页面在css中书写的像素
                 
常见的设计稿:
            设计图 640px       dpr 2   320
                  750px     dpr 2   375
                  1125px    dpr 3   
                   
常见的单位:
            px
            em
            pt(磅) 更多应用于安卓设置
            deg 角度
            %
             
rem: 跟随html的font-size:;值的大小
         默认状态下 1rem = 16px
                   
vw: 视口的宽度   width:100vw;  占满整个视口的宽度
                能够随着视口的宽度变化而变化
                100vw = 满屏 = 320px
                100vw = 满屏 = 375px
                 
vh: 视口的高度 height:100vh; 占满整个视口的高度
                能够随着视口的高度变化而变化
            vmin: 作比较, 窗口的宽高谁小,谁小就按照谁显示
            vmax: 作比较, 窗口宽高谁大,谁大就按照谁显示

rem
1: rem的大小为font-size的倍数，一般取大于100的
一般给html设置font-size。

vw布局：
使用vw是为了让元素的大小能受到屏幕大小的变化而控制
            让整体使用rem的单位,跟随html中font-size的设置
             
            640设计图:
            100vw = 满屏 = 320px
                1vw = 3.2px
                ?vw = 100px
                100/3.2 = 31.25vw 
                得出 31.25vw = 100px
             
            750设计图
            100vw = 满屏 = 375px
                100vw = 375px
                1vw = 3.75px
                ?vw = 100px
                100/3.75 26.66666666.....
                得出 26.67 = 100px
                 
                假设 1rem = 120px
                1vw = 3.75px
                ?vw = 120px
                120/3.75= 32vw
                得出 32vw = 120px
                 
 记住:
         如果使用vw + rem实现页面布局适配
         设计图是750px html{font-size:26.67vw;}
         设计图是640px html{font-size:31.25vw;}