# 1. 流式布局(百分比布局)
- 流式布局,就是百分比布局,也称非固定像素布局。
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
<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;
}
section {
width: 100%;
max-width: 980px;
min-width: 320px;
margin: 0 auto;
}
section div {
float: left;
width: 50%;
height: 400px;
}
section div:nth-child(1) {
background-color: pink;
}
section div:nth-child(2) {
background-color: purple;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
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
案例:京东移动端首页
- 采取单独制作移动端页面方案
- 布局采取流式布局
# 2. flex 弹性布局
# 3. rem适配布局
来看几个问题:
- 页面布局文字能否随着屏幕大小变化而变化?
- 流式布局和
flex
布局主要针对于宽度布局,那高度如何设置? - 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放?
# 3.1 rem基础
rem
(root em
)是一个相对单位,类似于em
,em
是父元素字体大小。- 不同的是
rem
的基准是相对于html
元素的字体大小。- 比如,根元素(
html
)设置font-size=12px
;非根元素设置width:2rem
;则换成px
表示就是24px
rem
的优势:父元素文字大小可能不一致, 但是整个页面只有一个html
,可以很好来控制整个页面的元素大小
- 比如,根元素(
<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: 12px;
}
div {
font-size: 12px;
width: 15rem; //180px
height: 15rem; //180px
background-color: purple;
}
p {
/* 1. em相对于父元素 的字体大小来说的 */
/* width: 10em;
height: 10em; */
/* 2. rem 相对于 html元素 字体大小来说的 */
width: 10rem; //120px
height: 10rem;
background-color: pink;
/* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
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
# 3.2 媒体查询 + rem
媒体查询+rem
实现元素动态大小变化
rem
单位是跟着html
来走的,有了rem
页面元素可以设置不同大小尺寸- 媒体查询可以根据不同设备宽度来修改样式
- 媒体查询+
rem
就可以实现不同设备宽度,实现页面元素大小的动态变化
<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;
}
/* html {
font-size: 100px;
} */
/* 从小到大的顺序 */
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
.top {
height: 1rem;
font-size: .5rem;
background-color: green;
color: #fff;
text-align: center;
line-height: 1rem;
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
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
# 3.3 rem适配方案
- 让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。
- 使用媒体查询根据不同设备按比例设置
html
的字体大小,然后页面元素使用rem
做尺寸单位,当html
字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配。
实际开发中适配方案:
按照设计稿与设备宽度的比例,动态计算并设置
html
根标签的font-size
大小;(媒体查询)CSS 中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为
rem
为单位的值;
设计稿常见尺寸宽度:
一般情况下,我们以一套或两套效果图适应大部分的屏幕,放弃极端屏对其优雅降级,牺牲一些效果,现在基本以750
为准。
rem适配方案技术选择:
# 方案1:rem
+ 媒体查询 + less
技术
假设设计稿是
750px
,假设我们把整个屏幕划分为15等份(划分标准不一 可以是20份也可以是10等份),每一份作为html
字体大小,这里就是50px
那么在
320px
设备的时候,html
字体大小为320/15
就是21.33px
用我们页面元素的大小,除以不同的
html
字体大小会发现他们比例还是相同的:比如我们以
750
为标准设计稿,一个100*100
像素的页面元素 在750
屏幕下, 就是100 / 50
转换为rem 是2rem * 2 rem
,宽高比例是1比1320
屏幕下,html
字体大小为21.33
则2rem = 42.66px
此时宽和高都是42.66
,但是宽高比例还是1比1
但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
总结:
- 无论是
750px
还是320px
的屏幕,一定要划分15等份,才是等比例缩放 rem
只与html
有关- 屏幕大小不同,但份数相同,不同屏引用不同的
css
样式,而css
样式只需要修改html
字体大小
元素大小取值方法:
- 页面元素的
rem
值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)- 其中:屏幕宽度 / 划分的份数 =
html
字体的大小
- 其中:屏幕宽度 / 划分的份数 =
- 或者: 页面元素的
rem
值 = 页面元素值(px) /html
字体大小
案例:苏宁移动端首页
# 方案2:flexible.js
+ rem
(更推荐)
Tip
技术方案1(less+媒体查询+rem
)效果很好,但是过于繁琐。因此介绍第二种 rem
方案。
手机淘宝团队出的简洁高效移动端适配库。
我们再也 不需要在写不同屏幕的媒体查询,因为里面js做了处理。
它的原理是把 当前设备划分为10等份,但是不同设备下,比例还是一致的。
我们要做的,就是确定好我们当前设备的html文字大小就可以了。
比如当前设计稿是750px
,那么我们只需要把html
文字大小设置为75px
(750px/10
)就可以里面页面元素rem
值:页面元素的px
值/ 75
。 剩余的,让flexible.js来去算。
flexible.js 项目地址:https://github.com/amfe/lib-flexible