1.响应式
    概念：一套代码适配多个终端
    关键字：@media
    原理：媒体查询

    dpr = 物理像素/逻辑像素
    布局视口：css显示的视口
    可视视口：看见的区域
    理想视口：布局视口和可视视口为1：1的关系

    移动端视口的设置

    2.移动端适配
    1.使用百分比布局
    2.使用单位 rem + js 实现
    rem是html文字大小的倍数
    约定是750的设计稿，html文字大小为100px，1rem=100px；
    但是默认情况下，1rem=16px；

    适配步骤：
    1.实现具体的尺寸的页面效果
    2.引入js文件
    [注意js文件中的参数是否要修改]
    3.使用插件修改px为rem单位
    1.alt+s确认html的文字大小是否修改了 [750的设计稿，html的文字大小应该修改为100]
    2.alt+z给选中的元素转换单位 [注意如果是px会变为rem，反之亦然]

    3.使用vw和vh
    视口宽度 = 100vw
    视口高度 = 100vh
    主要用于实现一屏页面