响应式布局：rem + 媒体查询_媒体查询响应式布局rem-CSDN博客

本文介绍了rem单位和媒体查询在响应式布局中的应用。通过媒体查询控制不同屏幕大小下html字体大小，结合rem调整页面样式。还讨论了Less的优势以及flexible.js在rem适配中的简单解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.rem单位

rem与em的区别：

rem是一个相对单位，相对于html的字体大小
em是一个相对单位，相对于当前元素或父元素的字体大小

rem相对于em的优势：

rem的参考系是唯一的html标签，如果整个页面很多地方使用rem进行布局，只需要在不同屏幕下修改html的字体大小，那么整个页面都会同步变化。而em的参考系过多，不好统一处理。

2. 媒体查询

上面我们知道在不同屏幕大小情况下，可以通过控制html的字体大小来控制页面样式，那么我们如何根据不同屏幕的大小来控制html字体的大小呢？

媒体查询基础语法：

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

这个媒体查询的意思：当屏幕宽度小于等于800px时，设置body背景色为pink。

下面实现在不同屏幕大小呈现不同的背景颜色：

        /* 1. 小于540px 页面的背景颜色变为蓝色 */
        @media screen and (max-width: 539px) {
   
            body {
   
                background-color: blue;
            }
        }
        /* 2. 大于540px 页面的背景颜色变成绿色 */
        @media screen and (min-width: 540px) {
   
            body {
   
                background-color: green;
            }
        }
        /* 3. 大于970px 页面的背景色变成红色 */
        @media screen and (min-width: 970px) {
   
            body {
   
                background-color: red;
            }
        }

注意：

媒体查询一般按照从大到小或从小到大的顺序来。
数字后面必须跟单位 970px 这个px不能省略。

3. 媒体查询和rem综合使用

当元素的宽高都是用rem作为单位时，在不同大小的屏幕中，我们可以使用媒体查询实现元素不同的大小。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }
        /* 从小到大的顺序 */
        
        @media screen and (min-width: 320px) {
     
            html {