前端三剑客
CSS

移动端开发之 rem 布局

# 移动端开发之 rem 布局

# 1. rem 基础

rem（root em）和 em 是 CSS 中的相对单位，用于定义元素的尺寸，它们在响应式设计中扮演着重要角色。

什么是 rem？

rem（root em）是一个相对单位，表示相对于根元素（通常是 <html>）的字体大小。
与 em 不同，rem 不受任何父元素的影响，这使得 rem 更加一致和可预测。

什么是 em？

em 是一个相对单位，表示相对于当前元素的父元素的字体大小。
由于 em 是基于父元素的字体大小，它可能会累积（在多个嵌套元素中），这会导致复杂的计算。

使用 rem 的优点

全局一致性：rem 使得在整个文档中，元素的大小保持一致，只需调整根元素的字体大小即可改变整个页面的比例。
易于维护：可以通过修改 <html> 的 font-size 来控制整个页面的缩放，使得响应式设计更加简单。

# 1.1 rem 的基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rem Example</title>
    <style>
        /* 设置根元素的字体大小为 12px */
        html {
            font-size: 12px; /* 根元素的基准字体大小 */
        }

        /* 使用 rem 定义其他元素的尺寸 */
        .container {
            width: 20rem;  /* 宽度等于 20 * 12px = 240px */
            padding: 1rem; /* 内边距等于 1 * 12px = 12px */
            background-color: #f0f0f0;
        }

        .text {
            font-size: 1.5rem; /* 字体大小等于 1.5 * 12px = 18px */
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="text">这个文本使用 rem 单位，字体大小是 18px。</p>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 1.2 em 的基本用法

em 是一个相对单位，它的大小相对于其父元素的字体大小，因此在多层嵌套的情况下，em 的值可能会累积。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Em Example</title>
    <style>
        /* 设置父元素的字体大小 */
        .parent {
            font-size: 20px; /* 父元素的基准字体大小 */
        }

        /* 子元素使用 em 作为单位 */
        .child {
            font-size: 1.5em; /* 字体大小等于 1.5 * 20px = 30px */
            color: #333;
        }

        /* 孙元素继承子元素的字体大小 */
        .grandchild {
            font-size: 1.2em; /* 字体大小等于 1.2 * 30px = 36px */
            color: #666;
        }
    </style>
</head>
<body>
    <div class="parent">
        <p class="child">这个文本使用 em 单位，字体大小是 30px。</p>
        <div class="grandchild">这个文本使用 em 单位，字体大小是 36px。</div>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

父元素 .parent 设置了 font-size: 20px，这意味着子元素 .child 的 1em 就等于 20px。
子元素 .child 使用了 font-size: 1.5em，因此其字体大小为 1.5 * 20px = 30px。
孙元素 .grandchild 使用了 font-size: 1.2em，其计算基于父元素（即 .child），因此其字体大小为 1.2 * 30px = 36px。

结论

em 单位灵活，可以用于相对调整元素的尺寸，但需要注意其累积效应，尤其是在多层嵌套的布局中。
与 rem 相比，em 适用于需要根据父元素动态调整尺寸的场景，而 rem 适用于需要全局一致性和可维护性的设计。

# 2. 媒体查询

# 2.1 定义

媒体查询（Media Query）是 CSS3 的新语法，允许开发者根据不同的媒体类型和特性来定义样式规则。

@media 查询：用于针对不同的媒体类型定义不同的样式。
响应式设计：通过媒体查询，可以针对不同屏幕尺寸设置不同的样式，当浏览器窗口大小变化时，页面会根据宽度和高度重新渲染。
应用广泛：媒体查询广泛应用于各种设备，如苹果手机、安卓手机、平板等。

# 2.2 语法规范

@media mediatype and|not|only (media feature) {
    /* CSS 样式代码 */
    CSS3-Code;
}

1
2
3
4

@media：以 @media 开头，声明媒体查询。
mediatype：指定应用样式的媒体类型。
关键字：and、not、only 用于连接和修饰媒体查询条件。
media feature：媒体特性，必须用小括号包围。

# 2.2.1 媒体类型 (`mediatype`)

将不同终端设备划分为不同的类型，称为媒体类型。

值	解释说明
`all`	用于所有设备
`print`	用于打印机和打印预览
`screen`	用于电脑屏幕、平板电脑、智能手机等显示屏幕

# 2.2.2 关键字 (`and`, `not`, `only`)

关键字用于将媒体类型和特性连接起来，形成更复杂的媒体查询条件。

and：将多个媒体特性连接起来，要求同时满足多个条件。
not：排除某个媒体类型，相当于逻辑中的“非”。
only：指定某个特定的媒体类型，确保样式只应用于该类型。

# 2.2.3 媒体特性 (`media feature`)

每种媒体类型都有各自的特性，媒体查询可以根据这些特性设置不同的展示风格。

值	解释
`width`	定义输出设备中页面可见区域的宽度
`min-width`	定义输出设备中页面最小可见区域宽度
`max-width`	定义输出设备中页面最大可见区域宽度

媒体查询的应用

媒体查询可以根据不同的屏幕尺寸或其他特性应用不同的样式，实现响应式设计。

/* 在屏幕上，最大宽度为 800 像素时，应用以下样式 */
@media screen and (max-width: 800px) {
    body {
        background-color: pink; /* 背景颜色为粉色 */
    }
}

/* 在屏幕上，最大宽度为 500 像素时，应用以下样式 */
@media screen and (max-width: 500px) {
    body {
        background-color: purple; /* 背景颜色为紫色 */
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

媒体查询的价值

响应式设计：媒体查询允许根据设备特性（如宽度、高度、分辨率）动态调整样式，使网站在不同设备上具有良好的用户体验。
灵活性：通过媒体查询，可以针对不同的设备设置特定的样式，从而优化页面在各种屏幕上的表现。

结合媒体查询和 rem 单位，可以实现根据不同设备的宽度来动态调整页面元素的大小。这种方法在响应式设计中非常有用，因为它能够让页面在不同的屏幕上保持良好的比例和用户体验。此外，可以根据设备尺寸引入不同的 CSS 文件，以优化页面加载和显示效果。

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

使用 rem 单位可以使页面元素相对于根元素的字体大小进行缩放。结合媒体查询，开发者可以根据不同的屏幕宽度动态调整根元素的字体大小，从而实现整个页面的比例变化。

以下示例展示了如何使用媒体查询和 rem 来动态调整页面元素的大小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive with Rem</title>
    <style>
        /* 默认字体大小 */
        html {
            font-size: 50px; /* 基本字体大小 */
        }

        /* 针对屏幕宽度在 320px 及以上的设备 */
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px; /* 字体大小为 50px */
            }
        }

        /* 针对屏幕宽度在 640px 及以上的设备 */
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px; /* 字体大小为 100px */
            }
        }

        /* 使用 rem 设置元素大小 */
        .box {
            width: 10rem;  /* 宽度根据根元素字体大小进行缩放 */
            height: 5rem;  /* 高度根据根元素字体大小进行缩放 */
            background-color: #4CAF50;
            margin: 1rem;  /* 外边距根据根元素字体大小进行缩放 */
            text-align: center;
            line-height: 5rem;
            color: white;
        }
    </style>
</head>
<body>
    <div class="box">动态变化的盒子</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 2.4 引入资源（理解）

当项目样式复杂时，可以为不同的设备引入不同的样式表文件。这种方法可以提高页面的加载效率，并针对不同的设备提供最佳的显示效果。

# 2.4.1 语法规范

通过 link 标签的 media 属性，可以根据设备的特性引入不同的 CSS 文件。

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

以下示例展示了如何根据屏幕尺寸引入不同的 CSS 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resource Linking Example</title>
    <!-- 当屏幕宽度在 320px 及以上时，加载 style320.css -->
    <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
    <!-- 当屏幕宽度在 640px 及以上时，加载 style640.css -->
    <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
</head>
<body>
    <div class="content">根据屏幕尺寸加载不同的样式表</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用场景

小于 640px：可以为小屏幕设备设置更简化的样式，如单列布局。
大于等于 640px：可以为大屏幕设备设置更丰富的样式，如多列布局。

总结

媒体查询 + rem：通过调整根元素的字体大小，可以轻松实现响应式设计，使得页面在不同设备上保持一致的比例。
引入资源：根据设备特性引入不同的 CSS 文件，优化页面加载和显示效果。
灵活性：这种方法不仅提升了开发的灵活性，还提高了用户在各种设备上的体验。开发者可以根据实际项目需求，灵活运用这些技术，构建出优质的响应式网页。

# 3. Less 基础

# 3.1 维护 CSS 的弊端

虽然 CSS 是网页样式的基础语言，但它也存在一些限制，尤其是在大型项目中：

冗余代码：CSS 缺乏变量和逻辑控制，往往需要重复书写相似的样式，导致代码冗余。
可维护性差：随着项目规模扩大，维护和更新 CSS 代码变得困难。
缺乏计算能力：CSS 本身没有内置的数学计算能力。
难以复用：CSS 样式复用性差，难以高效管理全局样式。

# 3.2 Less 介绍

Less（Leaner Style Sheets）是 CSS 的一种扩展语言，也称为 CSS 预处理器。它为 CSS 引入了编程语言的特性，增强了 CSS 的功能，简化了样式代码的编写和维护。

变量：使用变量可以避免重复代码，提高代码可读性和可维护性。
Mixin（混入）：可以将一组 CSS 声明打包成一个可重用的代码块。
嵌套：支持选择器嵌套，使代码结构更接近 HTML 结构。
运算：支持数学运算，方便动态计算值。
函数：支持使用内置或自定义函数进行复杂的样式计算。

Less 中文官网：Less 中文网址 (opens new window)

常见的 CSS 预处理器：Sass、Less、Stylus

实质：Less 是一种 CSS 预处理语言，它扩展了 CSS 的动态特性。

# 3.3 Less 使用

要使用 Less，你需要首先创建一个以 .less 为后缀的文件，并在其中编写 Less 语法。接下来，使用 Less 编译器将其转换为标准的 CSS 文件。

安装 Less 编译器

在项目中使用 Less 通常需要一个编译器。可以通过 Node.js 安装 Less 编译器：

npm install -g less

编译 Less 文件为 CSS 文件：

lessc styles.less styles.css

在 VS Code 中，可以使用 Easy Less 插件 实时编译 Less 文件为 CSS 文件。

# 3.4 Less 变量

Less 允许你定义变量来存储值，这些值可以在整个样式表中重用。这大大减少了重复代码，并提高了代码的可维护性。

# 变量语法

@变量名: 值;

示例

// 定义颜色和字体大小变量
@color: pink;         // 定义粉色变量
@font14: 14px;        // 定义字体大小变量

body {
    background-color: @color;  // 使用变量设置背景颜色
}

div {
    background-color: @color;  // 使用变量设置背景颜色
    font-size: @font14;        // 使用变量设置字体大小
}

1
2
3
4
5
6
7
8
9
10
11
12

# 变量命名规范

必须以 @ 符号作为前缀。
变量名不能包含特殊字符（如 !、@、# 等）。
除去前缀 @ 后，变量名不能以数字开头。
变量名大小写敏感。

# 3.5 Less 编译

Less 本质上是包含一套自定义语法及一个解析器的语言。用户根据这些语法定义样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。

编译：使用 Less 编译器将 .less 文件编译为 .css 文件。
使用：在 HTML 中引用生成的 CSS 文件即可。

# 3.6 Less 嵌套

类似于 HTML 元素之间的嵌套，Less 允许选择器嵌套，使得代码结构更接近 HTML 结构，提升可读性。

示例

// 定义一个容器的样式
#header {
    .logo {
        width: 100px; // 嵌套选择器，等同于 #header .logo
    }
}

1
2
3
4
5
6

等同于：

#header .logo {
    width: 100px;
}

1
2
3

# Less 中伪类、交集选择器、伪元素选择器的写法

要在 Less 中写伪类、交集选择器、伪元素选择器，需要在内层选择器的前面加上 &。

内层选择器前面没有 &，则它被解析为父选择器的后代；
若有 &，则被解析为父元素自身或父元素的伪类。

a {
    &:hover { // 使用 & 处理伪类
        color: red;
    }
}

1
2
3
4
5

等同于：

a:hover {
    color: red;
}

1
2
3

# 3.7 Less 运算

Less 支持基本的数学运算，如加（+）、减（-）、乘（*）、除（/），这使得动态计算值变得更加容易。

// 定义基本尺寸变量
@base-padding: 10px;

// 使用运算计算其他尺寸
.header {
    padding: @base-padding * 2;  // 计算得到的结果是 20px
}

.footer {
    margin-top: @base-padding + 5px;  // 计算得到的结果是 15px
}

1
2
3
4
5
6
7
8
9
10
11

注意

除法运算：需要用圆括号括起来。
运算符：运算符两侧要有空格。
单位规则：如果只有一个运算数带有单位，结果以该单位为准；如果有多个单位，以第一个单位为准。

# 4. rem 适配方案1

# 4.1 rem 适配方案

目标：

让页面元素在不同设备尺寸下保持比例缩放，实现自适应。
使用媒体查询根据不同设备按比例设置 html 的字体大小，然后页面元素使用 rem 作为尺寸单位，当 html 字体大小变化时，元素尺寸也会发生变化，从而达到等比缩放的适配。

# 4.2 rem 实际开发适配方案

动态计算并设置 html 根标签的 font-size 大小：根据设计稿与设备宽度的比例进行计算（使用媒体查询）。
使用 rem 作为 CSS 中的单位：将设计稿中元素的宽、高、相对位置等值按照比例转换为 rem。

# 4.3 rem 适配方案技术使用（市场主流）

# 4.3.1 方案1

使用 Less 进行样式编写。
使用媒体查询根据不同屏幕尺寸调整 html 的 font-size。
使用 rem 单位设置页面元素尺寸。

# 4.3.2 方案2（推荐）

使用 flexible.js 脚本动态设置 html 的 font-size。
使用 rem 单位设置页面元素尺寸。

提示：两种方案都存在，方案2更简单，通常不需要了解脚本的内部实现。

# 4.4 rem 实际开发适配方案1

结合 rem、媒体查询和 Less 技术实现适配。

# 4.4.1 设计稿常见尺寸宽度

设备	常见宽度
iPhone 4/5	640px
iPhone 6/7/8	750px
Android	常见320px、360px、375px、384px、400px、720px。大部分4.7~5寸的安卓设备为720px

提示：一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果。现在基本以750为准。

# 4.4.2 动态设置 `html` 标签 `font-size` 大小

假设设计稿是750px宽。
将整个屏幕划分为15等份（划分标准不一，可以是20份或10份）。
每一份作为 html 的字体大小，这里就是 50px。
在320px设备时，字体大小为 320 / 15，即 21.33px。
页面元素的大小除以不同的 html 字体大小，其比例保持不变。
例如，以750为标准设计稿，一个 100x100px 的页面元素在750px宽的屏幕下，就是 100 / 50 = 2rem，比例是 1:1。
在320px宽的屏幕下，html 字体大小为 21.33px，则 2rem = 42.66px，此时宽和高都是 42.66px，但宽高比例仍为 1:1。
这样可以实现不同屏幕下页面元素的等比例缩放效果。

# 具体步骤

选择一套标准尺寸，例如以 750px 为准。
用 屏幕尺寸 除以 划分的份数，得到 html 中的字体大小。不同屏幕下字体大小会不同。
页面元素的 rem 值 = 页面元素在750px下的 px 值 / html 中的字体大小。

以下是使用 rem 和媒体查询的具体实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Design with Rem</title>
    <style>
        /* 默认情况下，将屏幕宽度划分为15等份 */
        html {
            font-size: calc(100vw / 15); /* 根据视口宽度计算字体大小 */
        }

        /* 针对320px及以上设备 */
        @media screen and (min-width: 320px) {
            html {
                font-size: calc(320px / 15); /* 计算得出字体大小为 21.33px */
            }
        }

        /* 针对640px及以上设备 */
        @media screen and (min-width: 640px) {
            html {
                font-size: calc(640px / 15); /* 计算得出字体大小为 42.66px */
            }
        }

        /* 针对750px及以上设备 */
        @media screen and (min-width: 750px) {
            html {
                font-size: 50px; /* 750px / 15 等于 50px */
            }
        }

        /* 使用 rem 设置元素大小 */
        .box {
            width: 2rem;  /* 在750px设计稿中，宽度为100px，2rem */
            height: 2rem; /* 高度为100px，2rem */
            background-color: #4CAF50;
            margin: 1rem;  /* 外边距为50px，1rem */
            text-align: center;
            line-height: 2rem;
            color: white;
        }
    </style>
</head>
<body>
    <div class="box">自适应盒子</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

在移动端开发中，适配方案1（单独制作移动页面方案）是一个常用且高效的方法。以下是使用该方案制作苏宁移动端首页的详细步骤和技术细节。

# 5. 使用适配方案1制作苏宁移动端首页

# 5.1 技术选型

方案：单独制作移动页面方案。
技术：布局采用 rem 适配布局，结合 less 和媒体查询实现。
设计图：使用 750px 设计尺寸，以保证在不同设备上的一致性。

# 5.2 项目结构

project/
│
├── css/                 # 样式文件目录
│   ├── normalize.css    # 样式初始化文件
│   ├── common.less      # 公共样式文件
│   └── index.less       # 首页样式文件
│
├── images/              # 图片资源目录
│
├── upload/              # 上传文件目录
│
└── index.html           # 首页 HTML 文件

1
2
3
4
5
6
7
8
9
10
11
12

# 5.3 设置视口标签以及引入初始化样式

在 index.html 中设置视口标签和引入初始化样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css"> <!-- 引入样式初始化文件 -->
    <link rel="stylesheet" href="css/index.css">     <!-- 引入首页样式文件 -->
    <title>苏宁移动端首页</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 5.4 设置公共 `common.less` 文件

创建 common.less 文件，设置常见屏幕尺寸的 html 字体大小，使用媒体查询实现响应式布局。由于其他页面也需要这些设置，因此将其作为公共样式文件。

代码示例

// 设置常见屏幕尺寸下的 html 字体大小
// 默认字体大小（PC屏幕下）
html {
    font-size: 50px; // 默认将屏幕划分为15等份
}

// 划分份数：15
@num: 15;

// 适配不同的屏幕尺寸
// 320px
@media screen and (min-width: 320px) {
    html {
        font-size: (320px / @num); // 计算字体大小为 21.33px
    }
}

// 360px
@media screen and (min-width: 360px) {
    html {
        font-size: (360px / @num); // 计算字体大小为 24px
    }
}

// 375px
@media screen and (min-width: 375px) {
    html {
        font-size: (375px / @num); // 计算字体大小为 25px
    }
}

// 414px
@media screen and (min-width: 414px) {
    html {
        font-size: (414px / @num); // 计算字体大小为 27.6px
    }
}

// 750px
@media screen and (min-width: 750px) {
    html {
        font-size: (750px / @num); // 计算字体大小为 50px
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 5.5 新建 `index.less` 文件

创建 index.less 文件，编写首页样式。
将 common.less 引入到 index.less 中，以便复用公共样式设置。

代码示例

// 在 index.less 中导入 common.less
@import "common";

// 设置首页的样式
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
}

.header {
    width: 100%;
    height: 3rem;  // 使用 rem 单位设置高度
    background-color: #ff6600;
    color: #fff;
    text-align: center;
    line-height: 3rem;  // 垂直居中
    font-size: 1.2rem;  // 字体大小为 1.2rem
}

.container {
    padding: 1rem;  // 内边距为 1rem
}

.card {
    width: 100%;
    margin-bottom: 1rem;  // 底部外边距
    background-color: #fff;
    border-radius: 0.2rem;
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card img {
    width: 100%;
    height: auto;
}

.card-content {
    padding: 0.5rem;
    font-size: 0.9rem;  // 设置字体大小
    color: #333;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

总结

视口设置：在 HTML 中设置视口标签，确保页面在移动设备上的显示效果。
公共样式文件：使用 common.less 设置常见屏幕尺寸的 html 字体大小，方便复用。
样式编写：在 index.less 中编写首页的具体样式，并引入 common.less。
使用 rem 单位：通过 rem 单位实现响应式布局，使页面在不同设备上保持一致性。

# 6. rem 适配方案2

# 6.1 简洁高效的 rem 适配方案 flexible.js

提示
技术方案1（less+媒体查询+rem）效果很好，但实现较为繁琐。因此，介绍第二种更简洁的 rem 方案。

flexible.js 是由手机淘宝团队开发的一款简洁高效的移动端适配库。它大大简化了 rem 适配的过程，使得开发者不再需要为不同的屏幕尺寸编写复杂的媒体查询。其原理是将当前设备划分为 10 等份，无论设备尺寸如何变化，比例保持一致。开发者只需确定当前设备的 html 字体大小。

原理

如果设计稿宽度是 750px，那么 html 的字体大小设置为 75px（750px/10）。
页面元素的 rem 值为元素在设计稿中的 px 值除以 75。
剩下的由 flexible.js 自动计算和处理。

使用 flexible.js 的步骤

引入 flexible.js 库：它会根据设备宽度自动调整 html 的 font-size。
设置设计稿标准：假设设计稿宽度为 750px，设定 html 字体大小为 75px。
使用 rem 单位定义元素尺寸：元素的 rem 值为 px 值除以 75。

flexible.js 项目地址

项目地址：amfe/lib-flexible (opens new window)

# 6.2 使用适配方案2制作苏宁移动端首页

方案：单独制作移动页面方案
技术：布局采取 rem 适配布局2（flexible.js + rem）
设计图：设计图采用 750px 设计尺寸

# 6.2.1 前期准备

引入 normalize.css 和 flexible.js，并创建相关文件和文件夹。

项目结构

project/
│
├── css/
│   ├── normalize.css
│   └── index.css
│
├── js/
│   └── flexible.js
│
├── images/
│   └── ... （所有图片资源）
│
└── index.html

1
2
3
4
5
6
7
8
9
10
11
12
13

HTML 引入

在 index.html 文件的 <head> 中引入样式和脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>苏宁移动端首页</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/flexible.js"></script> <!-- 引入 flexible.js 库 -->
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 6.2.2 使用 VS Code cssrem 插件

cssrem 是一个自动将 px 单位转换成 rem 的插件。使用时需要手动设置 cssrem 插件的根字体大小为 75px。

插件设置

在 VS Code 的设置中，添加以下配置：

"cssrem.rootFontSize": 75

# 6.2.3 注意事项

flexible.js 会根据屏幕尺寸自动调整 html 的 font-size。当在 PC 端查看页面时，屏幕宽度可能过大，导致字体和布局不符合预期。为了解决这个问题，可以使用媒体查询进行调整：

/* 如果设备屏幕宽度超过 750px，则将 html 字体大小固定为 75px */
@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important; /* 强制设置字体大小为 75px */
    }
}

1
2
3
4
5
6

示例 CSS

以下是 index.css 的示例内容，展示如何使用 rem 单位定义元素尺寸：

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* 示例：设置首页头部样式 */
.header {
    width: 100%;
    height: 1rem; /* 高度为1rem，根据html字体大小动态调整 */
    background-color: #4CAF50;
    color: white;
    text-align: center;
    line-height: 1rem; /* 垂直居中 */
}

/* 示例：设置首页主要内容样式 */
.main {
    padding: 0.5rem; /* 内边距为0.5rem */
}

.banner {
    width: 100%;
    height: 3rem; /* 高度为3rem */
    background-image: url('../images/banner.jpg');
    background-size: cover;
    background-position: center;
}

/* 更多样式根据设计稿和需求进行编写 */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

总结

通过使用 flexible.js 和 rem 单位，我们可以实现简洁高效的移动端适配。这种方法不仅简化了响应式设计的实现过程，还提高了开发效率和页面在不同设备上的显示效果。结合 flexible.js 自动处理设备比例的能力，开发者只需关注设计稿与页面元素的比例关系即可。

编辑此页

上次更新: 2025/01/25, 22:32:05

← 移动端开发之流式布局移动端开发之响应式布局→

移动端开发之 rem 布局

# 移动端开发之 rem 布局

# 1. rem 基础

# 1.1 rem 的基本用法

# 1.2 em 的基本用法

# 2. 媒体查询

# 2.1 定义

# 2.2 语法规范

# 2.2.1 媒体类型 (mediatype)

# 2.2.2 关键字 (and, not, only)

# 2.2.3 媒体特性 (media feature)

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

# 2.4 引入资源（理解）

# 2.4.1 语法规范

# 3. Less 基础

# 3.1 维护 CSS 的弊端

# 3.2 Less 介绍

# 3.3 Less 使用

# 3.4 Less 变量

# 变量语法

# 变量命名规范

# 3.5 Less 编译

# 3.6 Less 嵌套

# Less 中伪类、交集选择器、伪元素选择器的写法

# 3.7 Less 运算

# 4. rem 适配方案1

# 4.1 rem 适配方案

# 4.2 rem 实际开发适配方案

# 4.3 rem 适配方案技术使用（市场主流）

# 4.3.1 方案1

# 4.3.2 方案2（推荐）

# 4.4 rem 实际开发适配方案1

# 4.4.1 设计稿常见尺寸宽度

# 4.4.2 动态设置 html 标签 font-size 大小

# 具体步骤

# 5. 使用适配方案1制作苏宁移动端首页

# 5.1 技术选型

# 5.2 项目结构

# 5.3 设置视口标签以及引入初始化样式

# 5.4 设置公共 common.less 文件

# 5.5 新建 index.less 文件

# 6. rem 适配方案2

# 6.1 简洁高效的 rem 适配方案 flexible.js

# 6.2 使用适配方案2制作苏宁移动端首页

# 6.2.1 前期准备

# 6.2.2 使用 VS Code cssrem 插件

# 6.2.3 注意事项

# 2.2.1 媒体类型 (`mediatype`)

# 2.2.2 关键字 (`and`, `not`, `only`)

# 2.2.3 媒体特性 (`media feature`)

# 4.4.2 动态设置 `html` 标签 `font-size` 大小

# 5.4 设置公共 `common.less` 文件

# 5.5 新建 `index.less` 文件