书写移动端网页先调一个合适的像素比

         可以通过meta标签来设置视口大小

         每一款移动设备设计时，都会有一个最佳像素比

        一般我们只需要将像素比设置为该值就可以得到一个最佳效果

        将像素比设置为最佳像素比的视口大小我们称其为完美视口

            width=device-width

            width=device-width, initial-scale=1.0 一个意思，为了保险起见都写

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

像素：

            在前端开发中像素分为两种：css像素 和 物理像素

             浏览器在现实网页时，需要将css像素转换为物理像素然后再呈现

             一个css像素由几个物理像素显示，由浏览器决定

            默认情况下在pc端，一个像素 = 一个物理像素

视口（viewport）

            视口就是屏幕中用来显示网页的区域

            可以通过查看视口大小 ，来观察css像素和物理像素的比值

            通过改变视口大小来改变像素比值

vw

            移动端开发中，就不能用px了

            vw 表示视口的宽度（viewport widyh）

            - 100vw = 一个视口的宽度

            - 1vw = 1%视口宽度

            这个单位永远相对于视口宽度计算，所以往往是将 px 和 vw 进行换算

适配

           设计稿宽度是750px。盒子宽120px，高40px。

           则高为120px/750px*100vw = 16vw

           则宽为40px/750px*100vw = 0.5333333vw

       开发中一般采用：

          100px/750vw=  0.13333333333333333 vw/px（1px 为0.13333333333333333 vw）

          0.13333333333333333 vw/px*40px = 5.333 vw（由于字体大小最小只能设置12px,所以扩大40倍，即 40px 5.333vw）

          设置 根元素html字体大小为   font-size: 5.33333vw; 此时利用rem单位（相对于根元素大小）

          此时40px为5.333vw

          此时计算宽高：

                宽    (120px/40px) = 3rem

                高    (40px/40px) = 1rem

手机像素

            在不同屏幕下，单位像素的大小不同，像素越小屏幕越清晰，手机像素点远小于计算机像素

            默认情况下，移动端的网页都会将视口设置为980像素（css像素）

            以确保pc端网页可以在移动端正常访问,但是如果网页的宽度超过980像素，移动端会自动缩放以显示全

           所以大部分pc端网页都会在移动端中正常浏览，但往往体验感都不好

           为了解决这个问题，往往给移动端重新设计个网页

像素参考网站

            https://material.io/resources/devices/