移动端适配

rem和em

 body{
            font-size: 32px
        }
        /* 浏览器默认字体大小是16px */
        .box1{
            /* 默认值 1em=16px */
            width: 2em;
            height: 2em;
            font-size: 50px;
            background-color: pink;
        }
​
        /* em根父元素和自己的字体大小有关 */
​
        html{
            font-size: 30px;
        }
​
        .box2{
            /* 默认1rem=16px  html字体大小16px */
            width: 2rem;
            height: 2rem;
​
        }
        /* 总结: 把页面内容的单位转换为rem ,时刻改变html字体大小,即可完成适配 */

媒体查询

检查屏幕大小,完成适配

     /* 媒体查询 */
        /* 屏幕在多少宽度时显示什么颜色 */
        @media (width:390px){
            body{
                background-color: yellow;
            }
        }
        @media (width:414px){
            body{
                background-color: pink;
            }
        }
        @media (width:375px){
            body{
                background-color: blue;
            }
        }