CSS -- 10. 移动WEB开发之rem布局

最新推荐文章于 2025-06-05 15:54:04 发布

原创最新推荐文章于 2025-06-05 15:54:04 发布 · 941 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

HTML+CSS 同时被 2 个专栏收录

31 篇文章

订阅专栏

前端

27 篇文章

订阅专栏

本文详细介绍了rem布局的基础原理，如何利用媒体查询针对不同屏幕尺寸调整样式，结合Less的使用提升维护效率，并探讨了rem适配方案在实际开发中的应用。

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

移动WEB开发之rem布局

1 rem基础

rem(root em)是一个相对单位，类似于em, em是父元素字体大小。

不同的是rem的基准是相对于html元素的孕体大小。

比如，根元素(html)设置font-size=12px,非根元素设置width:2rem;则换成px表示就是24px。

<!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>
        html {
            font-size: 14px;
        }
        
        div {
            font-size: 12px;
            width: 15rem;
            height: 15rem;
            background-color: purple;
        }
        
        p {
            /* 1. em相对于父元素 的字体大小来说的 */
            /*这样设置的p元素宽和高都是120px*/
            /*width: 10em;
            height: 10em; 
            background-color: pink;*/
            
            /* 2. rem 相对于 html元素 字体大小来说的 */
            /*这样设置的p元素宽和高都是140px*/
            width: 10rem;
            height: 10rem;
            background-color: pink; 
            /* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
</body>
</html>

2 媒体查询

2.1 什么是媒体查询

媒体查询(Media Query)是CSS3新语法。

使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大尔的过程中，页面也会根据浏览器的宽度和高度重新渲染面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

2.2 语法规范

用@media开头注意@符号
mediatype：媒体类型
关键字and not only
media feature媒体特性必须有小括号包含

@media mediatype and|not|only (media feature) {
    CSS-code
}

2.3 mediatype 查询类型

将不同的中断设备划分为不同的类型，称为媒体类型

2.4 关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
or：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

2.5 媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。

注意他们要用小括号包含

<!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>
            /* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
            /* max-width 小于等于800 */
            /* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */

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

            @media screen and (max-width: 500px) {
                body {
                    background-color: purple;
                }
            }
        </style>
    </head>
    <body>
    </body>
</html>

2.6 案例：根据页面宽度改变背景颜色

按照从大到小的或者从小到大的思路
注意我们有最大值max-width和最小值min-width都是包含等于的
当屏幕小于540像素，背景颜色变为蓝色(X<=539)
当屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色(540=<x<=969)
当屏幕大于等于970像素的时候，背景颜色为红色(×>=970)

<!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>
            /* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
            /* 2. 小于540px 页面的背景颜色变为蓝色 */

            @media screen and (max-width: 539px) {
                body {
                    background-color: blue;
                }
            }
            /* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
            @media screen and (min-width: 540px) and (max-width: 969px) {
                body {
                    background-color: green;
                }
            } 

            /* 4. 大于等于970 我们页面的颜色改为 红色 */

            @media screen and (min-width: 970px) {
                body {
                    background-color: red;
                }
            }
            /* 5. screen 还有 and 必须带上不能省略的 */
            /* 6. 我们的数字后面必须跟单位  970px   这个 px 不能省略的 */
        </style>
    </head>
    <body>
    </body>
</html>

2.7 媒体查询+rem实现元素动态大小变化

rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化

2.8 针对不同的屏幕尺寸引入不同的样式文件

页面较大时，一行显示两个div：

页面较小时，显示到两行：

<!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>
            /* 当我们屏幕大于等于 640px以上的，我们让div 一行显示2个 */
            /* 当我们屏幕小于640 我们让div一行显示一个 */
            /* 一个建议： 我们媒体查询最好的方法是从小到大 */
            /* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 */
        </style>
        <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
        <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
    </head>

    <body>
        <div>1</div>
        <div>2</div>
    </body>
</html>

style320.css

div {
    width: 100%;
    height: 100px;
}

div:nth-child(1) {
    background-color: pink;
}

div:nth-child(2) {
    background-color: purple;
}

style640.css

div {
    float: left;
    width: 50%;
    height: 100px;
}

div:nth-child(1) {
    background-color: pink;
}

div:nth-child(2) {
    background-color: purple;
}

3 Less基础

3.1 维护css的弊端

CSS是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念。

CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

3.2 Less介绍

Less(Leaner Style Sheets的缩写)是一门CSS扩展语言，也称为CSS预处理器。
做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS的语法基础之上，引入了变量，Mix(混入)，运算以及函数等功能，大大简化了CSS的编写,并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
Less中文网址：http://lesscss.cn
常见的CSS预处理器：Sass、Less、Stylus

一句话：Less是一门CSS预处理语言，它扩展了CSS的动态特性。

我们首先新建一个后缀名为less的文件，在这个less文件里面书写less语句。主要包括以下几个大的方面

Less变量
Less编译
Less嵌套
Less运算

3.3 Less的变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

@变量名：值

变量命名规范

必须有@为前缀
不能包含特殊字符
不能以数字开头
- 错误的变量名：@1color @color~@#
大小写敏感
- @color 和 @Color 是两个不同的变量

// 定义一个粉色的变量
@color: pink;  
// 定义了一个 字体为14像素的变量
@font14: 14px;
body {
    background-color: @color;
}

div {
    color: @color;
    font-size: @font14;
}

a {
    font-size: @font14;
}

3.4 Less的编译

本质上，Lss包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规测，这些规则最终会通过解析器，编译生成对应的CSS文件。所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。

使用vscode的插件：Easy LESS，安装完成后每次在保存的时候就可以自动生成对应的css文件

3.5 Less的嵌套

在css中，我们经常需要对某元素的子元素进行设置，经常会用到嵌套

#header {
    width: 500px;
}
#header .logo{
    width: 300px;
}

在less中，我们有一种新的写法，这种写法在经过编译之后会变成和上面一样的写法

#header{
    width: 500px;
    .logo{
        width: 300px;
    }
}

如果有伪类选择器，交集选择器，伪元素选择器，需要在前面加上&符号

如果没有&符号，则会被解析为父选择器的后代
如果有&符号，则会被解析为父元素自身或者父元素的伪类

.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    // 1. less嵌套 子元素的样式直接写到父元素里面就好了
    a {
        color: red;
        // 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加&
        &:hover {
            color: blue;
        }
    }
}
.nav {
    .logo {
        color: green;
    }
    &::before {
        content: "";
    }
}

编译后变成下列代码

.header {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.header a {
  color: red;
}
.header a:hover {
  color: blue;
}
.nav .logo {
  color: green;
}
.nav::before {
  content: "";
}

3.6 Less的运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。

/*Less里面写*/
@witdh: 10px + 5;
div{
    border:@witdh solid red;
}
/*生成的css*/
div{
    border:15px solid red;
}
/*less甚至还可以这样*/
width: (@width - 5)*2;

注意：

乘号(*)和除号(/)的写法
运算符中间左右有个空格隔开1px + 5
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位（先无视单位进行运算，然后最后生成的css中的单位是第一个值的单位）
如果两个值之间只有一个值有单位，则运算结果就取该单位

@baseFont: 50px;
html {
    font-size: @baseFont;
}
@border: 5px + 5;
div {
    width: 200px - 50;
    height: (200px + 50px ) * 2;
    border: @border solid red;
    background-color: #666 - #222;
}
img {
    width: 82rem / @baseFont;
    height: 82rem / @baseFont;
}

生成的css文件

html {
  font-size: 50px;
}
div {
  width: 150px;
  height: 500px;
  border: 10px solid red;
  background-color: #444444;
}
img {
  width: 82rem / 50px;
  height: 82rem / 50px;
}