移动端开发之 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>
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>
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;
}
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; /* 背景颜色为紫色 */
}
}
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>
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>
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; // 使用变量设置字体大小
}
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
}
}
2
3
4
5
6
等同于:
#header .logo {
width: 100px;
}
2
3
# Less 中伪类、交集选择器、伪元素选择器的写法
要在 Less 中写伪类、交集选择器、伪元素选择器,需要在内层选择器的前面加上 &
。
- 内层选择器前面没有
&
,则它被解析为父选择器的后代; - 若有
&
,则被解析为父元素自身或父元素的伪类。
a {
&:hover { // 使用 & 处理伪类
color: red;
}
}
2
3
4
5
等同于:
a:hover {
color: red;
}
2
3
# 3.7 Less 运算
Less 支持基本的数学运算,如加(+
)、减(-
)、乘(*
)、除(/
),这使得动态计算值变得更加容易。
// 定义基本尺寸变量
@base-padding: 10px;
// 使用运算计算其他尺寸
.header {
padding: @base-padding * 2; // 计算得到的结果是 20px
}
.footer {
margin-top: @base-padding + 5px; // 计算得到的结果是 15px
}
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>
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 文件
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>
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
}
}
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;
}
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
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>
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 */
}
}
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;
}
/* 更多样式根据设计稿和需求进行编写 */
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
自动处理设备比例的能力,开发者只需关注设计稿与页面元素的比例关系即可。