移动端布局之Rem和媒体查询适配布局

前言

• 媒体查询（Media Query）是CSS3新语法。
• 使用 @media 查询，可以针对不同的媒体类型定义不同的样式
• @media可以针对不同的屏幕尺寸设置不同的样式 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

---

Rem和媒体查询适配布局优点：

1.页面布局文字随着屏幕大小变化而变化
2.流式布局和flex布局主要针对于宽度和高度的设置
3.屏幕发生变化的时候元素高度和宽度等比例缩放

---

Rem

• rem (root em)是一个相对单位，类似于em，em是父元素字体大小
• 不同的是rem的基准是相对于html元素的字体大小
• 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
• rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小

在后面我们为了更加方便使用将px单位转换为rem单位，需要安装一个Vscode的插件

---

媒体查询

• 媒体查询（Media Query）是CSS3新语法。
• 使用 @media 查询，可以针对不同的媒体类型定义不同的样式
• @media可以针对不同的屏幕尺寸设置不同的样式 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

---

媒体查询简单应用：

媒体查询的代码如下：

@media screen and (max-width:539px) {
   
            body {
   
                background-color: blue;
            }
        }
}

媒体查询的简单应用：
可以对不同屏幕大小页面进行改变里面的背景颜色：

  <style>
        /* 媒体查询一般都是从小到大 或者 从大到小的顺序来写 */
        
        @media screen