CSS-移动端适配问题

相关概念：

1、像素

• 像素：屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
• 物理像素/设备像素：设备能控制显示的最小单位，换句话说就是分辨率，例如1920 x 1080
• CSS像素：抽象的，不存在的，用于逻辑上衡量像素的单位。也就是我们做网页时用到的css像素单位。
• 设备独立像素：可以由程序使用并控制的虚拟像素，可以由相关系统转换为物理像素，包含了CSS像素。在android 机中，css像素不叫 “css像素”，而叫“设备独立像素”。
• 像素密度（PPI）：
  
  ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个高大上的名字——Retina）
• 设备像素比 DPR：设备像素和设备独立像素的比值，受设备像素密度和缩放比例影响。

2、视口

一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口，它们在屏幕适配中起着非常重要的作用。
2.1 布局视口
当我们以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时，它就是基于布局视口来计算的。

• PC端 布局视口就等于当前浏览器的窗口大小（不包括 borders 、 margins、滚动条）
• 移动端 布局视口大部分默认为980px，这保证 PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。

2.2 视觉视口

• 用户通过屏幕真实看到的区域，默认等于当前浏览器的窗口大小（包括滚动条宽度）。

• 在缩放时，不会改变布局视口的大小，但会改变视觉视口的大小

2.3 理想视口

• 网站页面在移动端展示的理想大小

• 在浏览器调试移动端时页面上给定的像素大小就是理想视口大小，它的单位正是设备独立像素。
  

• 在移动端开发中，通过meta标签确定布局视口的大小

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

width ：定义布局视口的宽度，可选值为整数和device-width

initial-scale:定义页面初始缩放比率

width=device-width 使布局视口的宽度=理想视口的宽度

initial-scale=1.0 使理想视口宽度=视觉视口宽度

即三种视口宽度均一致——移动端适配

当缩放比不为1时，布局视口的大小取width和视觉视口宽度的较大值

3、缩放

1. 缩放不会影响布局视口和理想视口的大小，会影响视觉视口的大小。
2. 缩放比=理想视口的大小/视觉视口的大小，也可以认为是CSS像素/设备独立像素
3. 例如，缩放200%，CSS会随着变大，而视觉视口会变小
4. 当不缩放时，CSS像素=设备独立像素

4、概念之间的关系

5. 设备像素是屏幕生产之后就固定的，而设备独立像素和CSS像素都是虚拟可变的。

6. PC端，未缩放，设备像素比为1，即1个CSS像素=1个设备独立像素=1个设备像素。

7. 移动端，根据设备的像素密度，确定设备像素比，即理想视口的大小

8. 移动端适配后，1个CSS像素=1个设备独立像素=1个设备像素
   

5、开发中的布局适配

REM方案：结合VM和根元素的front-size，对移动端元素的大小进行设置

1. 确定设备像素比和设备像素
2. 在html中设置front-size:100/设备像素*一定倍数
3. 利用rem设置元素大小

html{
            /* 
                网页中字体大小最小是12px，不能设置一个比12像素还小的字体
                    如果我们设置了一个小于12px的字体，则字体自动设置为12

                0.1333333vw = 1px

                5.3333vw = 40px
            */
            font-size: 5.3333vw;
        }
        .box1{
            /* 
                rem
                    - 1 rem = 1 html的字体大小
                    - 1 rem = 40 px(设计图)
            */
            width: 18.75rem;
            height: 0.875rem;
            background-color: #bfa;
        }