像素：

1.1 物理像素 ：就是实际的显示器的分辨率，也就是一个个发亮的点，例如电脑的一般有1920x1080，苹果6是750x1334

1.2 css像素：写网页的时候使用的px像素，就是css像素

1.3 视口：

    1. 指的是可见的窗口大小，单位是px,也就是css像素，不是指真实用尺子测量的尺寸，也不是物理像素；例如打开pc端浏览器，查看html的宽度，那就是视口的大小；

    2. 可以通过改变视口的大小，来改变css像素与物理像素的比值；

 默认情况下：  

                pc端视口宽度：1920px （css像素） , 分辨率宽：1920（物理像素）  
                移动端视口宽度： 980px（css像素）， 苹果6分辨率宽：750（物理像素）

          总结：
                 pc端默认 css像素与物理像素的比例是 1 ： 1， 也就是1个css像素用一个物理像素来显示； 
                 苹果6的css与物理比例是 1: 0.76， 也就是1个css像素用0.76个物理像素来显示；
                
          备注：
                  移动端默认视口为什么是980px, 是因为以前的pc端网页的宽度一般为980px,
                  所以为了能在移动端把pc网页全部展示出来；
                  
                  怎么改变视口的宽度？通过，meta标签，
                  <meta name="viewport" content="width=device-width, initial-scale=1.0 /> 
                  width就是设置视口的宽度；device-width是每个手机的一个变量值，里面存的是最佳的视口宽度；

    例如苹果6，最佳的显示是，把css显示放大2倍来显示，因为移动端的每个物理像素表示的点太小了，只有把1个css像素用2个物理像素来显示，才看得清，所以css与物理像素的比例为1:2，所以通过改变视口的宽度，视口的宽度改为375px，也就是物理不变为750， css为375，也就是一个css用2个物理来显示

移动端适配

前提1 设计稿一般为750px, 为了图片能清晰

前提2 100vw  代表的是100全宽

需求 把750px的设计放到全屏手机中；

计算  750px = 100vw;   1px = 100/750 = 0.1333vw

规定   1rem = 1 个html的font-size大小；

设置 把html的font-size设为 ：( 0.1333 * 40) vw  . //  乘以40是因为浏览器有最小字体大小的限制，例如谷歌限制最小为12px,所以要乘个数，让它变大一点；

              1rem = (0.1333 * 40) vw ;   

              1rem = 1px * 40 = 40px;  
              
              设计稿一个组件的宽度为48px；  
              
             

div {
                width: ( 48 / 40 ) rem  

           }