关于视口，rem单位的计算方式方法

关于头部区域的视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  在pc端布局写不写无所谓 但是移动端必须写

关于计算单位rem

网页中常用的单位有哪些

        - px 像素

        - em 相对单位

        - pt 磅 硬件、打印机

        - %

        - deg

        - rem 相对单位 相对于html根元素 font-size进行计算的

    推算思路(了解=>总结)

        - 写页面都是用的px像素单位,px是固定不变的

        - 移动端切换的时候,移动端的宽高大小都是不一样的,html大小也是不一样的

        - 网页中有一个盒子(2rem)

        - 改变每一个移动端中的html font-size的值

        - 媒体查询

            - iphone5 html{font-size:10px}

            - iphone6 html{font-size:20px}

    如何进行计算

        dpr = 物理像素 / 逻辑像素

            - dpr 设备像素比

            - 物理像素:能看到能触摸到一切 ui设计图量出来的大小

            - 逻辑像素:前端需要设置的css样式大小

    常见的设计图 dpr

        - 640px的设计图     dpr为2

        - 750px的设计图     dpr为2

        - 1080px的设计图    dpr考虑为3

px转换为rem

        - 计算公式: dpr = 物理像素 / 逻辑像素

        - 逻辑像素 = 物理像素 / dpr

        - 改变每个移动端html下面的font-size的值

移动端的第一种布局方式

        - 方法:媒体查询+rem单位实现

        - 优点:简单好理解

        - 缺点:计算麻烦、有多个设备就需要写多个媒体查询

    引出移动端第二种布局方式 vw单位(viewport width)

    关于vw单位的理解:视口宽度 1vw = 浏览器视口的百分之一

        - 1vw = 1% 视口?

        - 100vw = 100% 宽度?

            - 等于      当浏览器没有滚动条的时候

            - 不等于    当浏览器有滚动条的时候 vw单位只能在移动端使用

    推算思路

        - 100vw可以看成是100%的宽度 拿到ui设计图 1vw = 设计图的百分之一

        - 设备像素比 = 物理像素/逻辑像素

    1.设计图是640px dpr为2

        - 640px/2 = 100vw

        - 320px = 100vw     => iphone5

        - 1vw = 3.2px

        - 1px = 0.3125vw

    2.设计图是750px dpr为2

        - 750px/2 = 100vw

        - 375px = 100vw    => iphone6\7\8 标准设计图都是750px

        - 1vw = 3.75px

        - 1px = 0.2667vw

    总结

        - 当设计图是640px的时候,html{font-size:31.25vw}

        - 当设计图是750px的时候,html{font-size:26.67vw}

        - 计算方式:物理像素/dpr/100 => 固定的逻辑像素(px=>rem)