web移动端布局及适配篇

                        web移动端布局及适配

    今天打算把自己移动端布局的心得和体会用最简单的方式记录下来:

一.运用<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">

    目的:a.为了是手机可以操作宽度等于手机设备的宽度

                代码:width=device-width

            b.用户不可以进行页面的缩放

                代码:user-scalable=0

            c.初始化缩放比例为1

                代码:initial-scale=1.0

*********拓展知识*************

viewport:

1.通常来说，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。不同设备上的浏览器的默认viewport的宽度也不一样 如图:

但是，我们需要的只是显示只是手机屏幕大小的区域就足够了,所以我们设置了content="width=device-width。

    tip:viewport的最小宽度只能设备的宽度,无法更加小了

2.为了更好的理解和应用viewport，可以把viewport细分一下。分别为（可见viewport，布局viewport，理想viewport），如下图：

3.理想viewport是最适合移动设备的viewport，理想viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为理想viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。理想viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对理想viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户

二:运用rem布局

    vw:屏幕的宽度

    rem:html的font-size的大小

    因为1vw为屏幕的可视宽度，而我们的设计稿一般是根本iphone6的尺寸设计的，所以我们在设置html的时候只需要设置

        html: 26.7%vw    /*这里26.7%vw就相当于100px，所以1rem=100px*/

    然后我们所有的图片，元素盒子，字体...只要关于px的都用rem相应替换，就能达到不同的手机根据你的屏幕的大小，你的图片，盒子，字体

    这些都会跟着你的手机的屏幕改变而变大或者变小

    例如:  width:100px  =>   width:1rem

三:DPR不同产生的影响

    这里先解释一下DPR(设备像素比):

     物理像素:一个物理像素是显示器(手机屏幕)上最小的物理显示单元（像素颗粒），在操作系统的调度下，每一个设备像素都

     有自己的颜色值和亮度值.

     设备独立像素:设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的

     虚拟像素(比如: css像素)，有时我们也说成是逻辑像素。

     DPR = 物理像素 / 逻辑像素(px)   ps:在某一方向,x 或 y 方向

  /*************拓展知识**************/

   问题:为什么一iPhone6为标准的设计稿的尺寸是宽750px？             

   答:iPhone6的满屏宽度是375px（Viewport’s device-width (in CSS pixels)：375px,而iPhone6采用的视网膜屏的物理像素

    是满屏宽度的2倍，并且设计师所用的PS设计软件分辨率和像素关系是1:1。所以为了做出的清晰的页面，设计师一般给出750px

    的设计图，我们再根据需求对元素的尺寸设计和压缩。

        简单点解释:

        例:你的手机的分辨率为1920*1080 你的手机的宽为540 那么你的DPR就是2

            也就代表1pxcss布局上面会有2个像素点去填充

        所以如果你的图片是给DPR等于1的手机切的，这时图片上面的像素点和你手机上的像素点是一个点对一个点，那么到DPR等于2    

手机上的时候，你的图片上面一个像素点就会被2个手机上面的物理像素给平分，像素点颜色本来就那么多，被拉大了，当然就淡了，就会导致你的图片很模糊。

        解决办法:根据不同的DPR值去动态的获取不同的图片@2x，@3x...等图片

           let DPR = window.devicePixelRatio

         然后根据不同的DPR去动态拉取你的不同的图片即可;

四:特殊型号的手机；

    当然，市面上也存在一些手机长宽比和普通的机型不一样的情况，比如：三星的s8+ 屏幕就属于窄长型，所以很多时候我需要写一些代码来处理这些与众不同的屏幕，这个时候就需要用到我们的媒体查询了:

    例：@media screen and (min-width: 375px) and (max-width: 414px) {

            ul li{

                content: "Email: ";

                font-style: italic;

                color: #666666;

               }

            }

具体的媒体查询方法可以上 搜索 W3C School具体指导：https://www.w3cschool.cn/css3/um62qxp0.html

结语：完全属于个人经验，按照这四步，基本可以解决移动的布局问题，望指正，继续改进