移动端视口及vw+rem布局知识总结

视口：
浏览器显示页面内容的屏幕区域

视口分为：布局视口 视觉视口 理想视口

布局视口：
一般移动端设备的浏览器都默认设置了一个布局视口，为了解决早期pc端页面在移动端上的显示问题
苹果 安卓基本上设置这是视口的分辨率980px

视觉视口：
你看到的网页区域，指的是网址的区域
通过缩放去操作视觉视口不会影响布局视口

理想视口：
1：是网站在移动设备浏览器中最理想的一种状态（浏览和阅读宽度设定的）
2：对设备来说是最理想的尺寸
3：引入meta标签，通知浏览器进行对应的操作
4：meta标签的主要目的就是为了使布局视口的宽度应该与理想视口宽度一致，就是设备有多宽，布局视口就有多宽

视口缩放：
在375px的设备截图，放到ps中，测量为750px
在ps中值比 设备中的px值大一倍

物理像素：
1：指的就是屏幕显示的最小的点，是真实存在的，设备厂商在生产设备使就已经定好了的，比如：苹果678 750*1334
2：视网膜高清显示屏，retina显示屏，作用是把更多的物理像素点压缩至一块屏幕里，像素点越密集，看的越清晰，达到更高的分辨率，提高画质
了解：  ppi：每英寸所显示的像素点的密度
       dpi：每英寸所显示的像素点的点数

物理像素比：物理像素 / 逻辑像素
    物理像素：就是设备所显示的像素（手机截图在ps中量取出来的像素大小 ）
    逻辑像素：页面在css中书写的像素

常见设计稿：
    常见设计图   
        640px  dpr2
        750px dpr2
        125px dpr3
常见的单位：
    px
    em
    pt（磅）更多应用于安卓
    deg
    %


    rem：跟随html的font-size的值大小
        默认状态下1rem=16px
    
    vw：视口的宽度 width：100vw；占满整个视口的宽度
        能够随着视口宽度的变化而变化
    vh：视口的高度 width：100vh；占满整个视口的高度
        能够随着视口高度的变化而变化

    vmin：作比较，窗口的宽高谁小，谁小就按照谁显示
    vmax：作比较，窗口的宽高谁大，谁大就按照谁显示

    记住：如果使用vw + rem实现页面布局适配
        设计图是750px html{font-size:26.67vw;}
        设计图是640px html{font-size:31.25vw;}