移动端响应式布局``` 移动端 em 我要好好学习我要好好学习我要好好学习 rem 我要好好学习我要好好学习 `

移动端
<!-- 适配移动端的时候必须要加上理想视口标签 -->
    <!-- viewport视口  width=device-width 宽度等于设备宽度 initial-scale=1.0 初始化不缩放-->
    
em
<body style="font-size: 10px;">
    <!-- em是相对于父元素来设置 -->
    <!-- em有局限性 父元素变化了 em所对应的px也变化 -->
    
    <div style="font-size:40px">我要好好学习</div>
    <div style="font-size:20px;">
        <!-- 2em 2*20=40px -->
        <div style="font-size:2em;">我要好好学习</div>
    </div>
    
    <!-- 2em 2*10=20px -->
    <div style="font-size:2em;">我要好好学习</div>
    
rem
<!-- 移动端项目推荐使用rem -->
<html lang="en" style="font-size:20px;">
    <!-- rem是相对根元素（html）来设置的 -->
    <!-- 1rem就相当于是根元素的字体大小 2rem= 2*20 -->
    <!-- rem移动端使用的单位 -->
    <div style="font-size:40px">我要好好学习</div>
    <div style="font-size:2rem">我要好好学习</div>

响应式布局媒体查询
实现div在屏幕不同大小的情况下 显示不同的颜色
媒体查询
         max-width 最大宽度
         min-width 最小宽度
/* 500 - 700  包括500 和 700 像素的时候*/
            @media screen and (max-width:700px) and (min-width:500px) {
            div{
                background-color: chartreuse;
            }
        } 
 /* min-width:800px 屏幕大小 大于等于800px的时候显示如下的样式 */
             @media screen and (min-width:800px) {
            div{
                background-color: red;
            }
        }
  /* max-width:700px 屏幕大小 小于等于700px的时候显示如下样式 */
            @media screen and (max-width:700px) {
            div{
                background-color: yellow;
            }
        }

移动端 响应式布局

移动端响应式布局