移动端布局、响应式

1.响应式
    概念:一套代码,能够适应多个终端。【页面能够根据屏幕尺寸、设备类型等,实现不一样的页面效果】
    原理:利用媒体查询。
    关键字:  @media
       
    属于说明:
        设备像素:屏幕的物理像素
        逻辑像素:css上的像素
        dpr = 设备像素/逻辑像素
     
        理想视口:  可视视口/布局视口 = 1;
        理想视口的设置<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1,maximum-scale=1,user-scalable=no">

2.移动端适配方案
    1.使用百分比
    2.使用rem单位
        rem是基于html文字大小的倍数的单位.1rem = html文字大小，
        约定好了750px的设计稿，给html设置的默认文字大小为100px
        1rem=100px
        其它尺寸的设计,应该是html文字大小公式:X=设计稿大小/7.5

        步骤:
            安装vscode插件 -px to rem 
            量取设计稿的宽度,通过alt+s快速设置html的文字大小.
            x=设计稿的宽度*100/750
            验证单位是否转换成功
            引入rem.js文件   放在head标签里面
            直接设置量取的尺寸宽度,然后在alt+z转换单位
    
    3.使用vw 和 vh单位
        1vw就是屏幕宽度的1%
        1vh就是屏幕宽度的1%

        量取元素宽度尺寸应该设置成多少vw
        设计稿宽度750/100 = 量取的元素的宽度 / x
        x = 量取的元素的宽度*100 / 设计稿的宽度750