适配中的像素

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

        -可以通过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像素和物理像素的比值

       

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

     -->

     <!--

         手机像素

                    在不同屏幕下，单位像素的大小不同，像素越小屏幕越清晰

                    手机像素点远小于计算机像素

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

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

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

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

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

      -->