移动端页面布局技巧、Grid布局基础知识
程序员文章站
2022-06-02 18:49:18
...
实例演示 rem+vw 布局的原理与 rem 的设置技巧
- DPR: 设备像素比
- 布局视图: 为了保证内容全部显示,一般设置为
980px
- 视觉视图:
-
移动设备的布局视图: 375px、width = device-width
width: 页面的布局的宽度
device-width: 视觉视图的宽度, 设备宽度
width = 980px
device-width: 375pxwidth = device-width
width = 375px -
当前的布局视图,就是当前移动设备浏览器的可视区宽度
- 布局视图 = 视觉视图 : width = device-width
- initial-scale=1.0: 1:1 还原视觉视图的布局, 叫
理想视图
- 理想视图 = 视觉视图 : initial-scale=1.0
-
目前主流的移动端布局方案:
rem + vw
-
浏览器的默认字号: 16px, 1rem = 16px
- 为了计算方便, 推荐将 1rem = 100px
- 通常如设计稿宽度是 750px , DPR = 2, 则 device-width = 750px / DPR = 750 / 2 = 375px
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>rem+vw布局的原理与rem的设置技巧</title>
</head>
<body>
<style>
html {
/* font-size: 100px; */
font-size: calc(100vw / 3.75);
}
/* 因为 font-size是一个可以被继承的属性 */
body {
/* 把字号还原成浏览器默认的字号, 16px */
/* font-size: 16px; */
font-size: 0.16rem;
}
/* 到现在为止,
1rem = 100px html
1em = 16px body */
</style>
<div class="box">hello php.cn</div>
<style>
.box {
/* 200px * 50px */
width: 2rem;
height: 0.5rem;
border: 1px solid #000;
background-color: lightgreen;
box-sizing: border-box;
}
/* vw 是 当前屏幕宽度的 百分比 */
/* 1vw = 1% */
/* 当屏幕宽度小于320px的时候, 字号不要再小了,否则就看不清了 */
@media screen and (max-width: 320px) {
html {
font-size: 85px;
}
}
/* 当屏幕宽度大于640px的时候, 字号不要再放大了 */
@media screen and (min-width: 640px) {
html {
font-size: 170px;
}
}
</style>
</body>
</html>
Grid 布局相关属性
- Grid 布局基本步骤:创建 Grid 容器 => 将 Grid 项目放到容器中相应食用油步 => 设置容器和项目属性
创建 Grid 容器(显式)
- 隐式 Grid 容器,当显式不能放置所有项目时会自动创建
STT | 属性 | 说明 |
---|---|---|
1 | display: grid; |
声明容器为网格容器 |
2 | grid-template-columns: 30rem 30rem 30rem |
显示的划分列,生成指定数量的单元格来放置项目 |
3 | grid-template-rows: 30rem 30rem 30rem |
显示的划分行,与列组成单元格 |
4 | grid-auto-columns: auto; |
根据项目数量在容器中隐式生成行与列来放置项目,列宽自动 |
5 | grid-auto-rows: 150px; |
根据项目数量在容器中隐式生成行与列来放置项目,行高 150 PX |
6 | grid-auto-flows: column; |
声明项目在网格中自动填充方案,列优先 |
7 | grid-auto-flows: row; |
声明项目在网格中自动填充方案,行优先 |
设置网格单元格数量尺寸单位
- 使用
repeat
重复设置单元格时命名网格线会自动添加索引 -
repeat(3,[col-start] 100px [col-end])
:只需设置命名前缀,编号会自动生成 -
grid-column-end: cil-end 3;
: 前缀索引可以应用到自动生成的命名网格线
STT | 单位 |
---|---|
1 |
px : 固定宽度 |
1 |
rem : 根据根元素字号大小 |
2 |
% : 百分比 |
3 |
auto : 自动计算 |
4 |
fr : 比例 |
5 |
repeat('重复次数', '每次大小') : 重复生成 |
6 |
分组 : |
7 |
minmax : 区间 |
8 |
auto-fill : 自动填充 |
将项目填充到指定单元格
- 默认从左上角开始,从左到右,从上到下依次从 1 开始编号
- 如果从右下角开始,由下向上,由右向左依次从-1 开始编号
- 开始线编号为当前项目默认编号时可省略
- 根据网格线可以将项目放到网格线形成的封闭矩形区域中
- 网格线编号支持语义化自定义
grid-template-columns: [col1-s] 100px [col1-e col2-s] 100px;
grid-template-rows: [row1-s] 100px [row1-e] 100px;
grid-column-start: col2-s;
grid-row-start: row1-s;
STT | 示例 | 说明 |
---|---|---|
1 | grid-row-start: 1; | 设置开始行线编号,默认即从 1 开始 |
1 | grid-row-end: 3; | 设置结束行线编号为 3 |
2 | grid-column-start: 1; | 设置开始列线编号,默认即从 1 开始 |
2 | grid-column-end: 2; | 设置开始列线编号为 2 |
3 | grid-row: 1 / 3; | 简写,开始行线编号 / 结束行线编号 |
4 | grid-colum: 1 / 2; | 简写,开始列线编号 / 结束列线编号 |
5 | grid-row-start: 2 span 2 | 设置开始行线编号为 2 跨 2 行,== grid-row: 1 / 3; |
6 | grid-colum-start: 2 span 2 | 设置开始列线编号为 2 跨 2 列,== grid-colum: 1 / 3; |
7 | grid-row: 3 / span 2 | 设置开始行线编号为 3,然后跨 2 行 |
8 | grid-colum: 2 / span 2 | 设置开始行线编号为 3,然后跨 2 列 |
9 | grid-area: 1 1 3 2 | 网格区域行开始/列开始/行结束/列结束 |
9 | grid-area: 3 / 1 / span 1 / span 3; | 行 3 开始,列 1 开始,行跨 1,列跨 3 |
自定义命名网格区域: grid-template-areas
- 可以每一个网格区域设置一个语义化的名称
- 具有名称的网格区域称之为
命名区域
- 名称相同的网格区域会自动合并形成更大的区域空间
- 项目设置的区域名称后会自动填充到容器中对应的命名区域
.container {
/* 创建网格区域 */
display: grid;
grid-template-columns: 30rem 30rem 30rem;
grid-template-rows: 30rem 30rem 30rem;
/* 设置命名网格区域相同名称的命名区域会合并 */
grid-template-areas:
"header header header"
"left main rigth"
"footer footer footer";
}
.item {
grid-area: header;
}
网格区域占位符
- 当项目默认已填充到正确的区域中无需设置时,可以使用
.
作为占位符
.container {
/* 设置命名网格区域相同名称的命名区域会合并 */
grid-template-areas:
"header header header"
". . ."
"footer footer footer";
}
.item {
grid-area: header;
}
命名网格区域线默认名称
- 区域起始行列: 区域名称-start; 如: header-start、header-start, 表示区域起始行和起始列;
- 区域结束行列: 区域名称-end; 如: header-end、header-end, 表示区域结束行和结束列;
.item {
grid-area: header-start / header-start / header-end / header-end;
}
项目在”容器”中的对齐方式
- 容器必须有剩余空间
STT | 属性 | 说明 |
---|---|---|
1 | justify-content: start/end/center; |
设置项目在容器水平方向的对齐方式:开始/结束/居中;默认开始 |
2 | justify-content: space-between/space-around/space-evenly; |
设置项目在容器水平方向的对齐方式:两端/分散/平均; |
3 | align-content: start/end/center; |
设置项目在容器垂直方向的对齐方式:开始/结束/居中;默认开始 |
4 | align-content: space-between/space-around/space-evenly; |
设置项目在容器垂直方向的对齐方式:两端/分散/平均; |
5 | place-content: '水平方向' '垂直方向'; |
简写 |
项目在所在的”单元格”中的对齐方式
- 单元格必须有剩余空间
STT | 属性 | 说明 |
---|---|---|
justify-items: start/end/center; |
设置所有项目在单元格/网格区域中,水平方向的对齐方式: 开始/结束/居中;默认开始 | |
align-items: start/end/center; |
设置所有项目在单元格/网格区域中,垂直方向的对齐方式: 开始/结束/居中;默认开始 | |
place-items: '水平方向' '垂直方向'; |
简写 |
设置某个项目在所在的”单元格”中的对齐方式
STT | 属性 | 说明 |
---|---|---|
justify-self: start/end/center; | 设置某个项目在单元格/网格区域中,水平方向的对齐方式: 开始/结束/居中;默认开始 | |
align-self: start/end/center; | 设置某个项目在单元格/网格区域中,垂直方向的对齐方式: 开始/结束/居中;默认开始 | |
place-self: ‘水平方向’ ‘垂直方向’;` | 简写 |
设置容器行与列之间的间距
-
gap: 5px;
设置行列间距,行与列间距相等可只写一个值; gap: 行间距 列间距;
column-gap: 列间距;
row-gap: 行间距;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>grid布局中相关属性</title>
<style>
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
.container {
background-color: #f2f3bb;
width: 40rem;
height: 40rem;
/* 创建网格容器 */
display: grid;
grid-template-columns: repeat(3, 10rem);
grid-template-rows: repeat(3, 10rem);
gap: 0.5rem;
/* 设置所有项目在容器水平对方方式 */
/* justify-content: start; */
/* justify-content: end; */
/* justify-content: center; */
/* 设置所有项目在容器垂直对方方式 */
/* align-content: start; */
/* align-content: end; */
/* align-content: center; */
place-content: center center; /* 所有项目在容器对齐方式 */
/* 设置所有项目在单元格/网格区域水平对方方式 */
justify-items: start;
justify-items: end;
justify-items: center;
/* 设置所有项目在单元格/网格区域垂直对方方式 */
align-items: start;
align-items: end;
align-items: center;
place-items: center center; /* 所有项目在单元格格/网格区域对齐方式 */
}
.item {
width: 5rem;
height: 5rem;
background-color: #df93f7;
}
/* 设置单个项目在单元格/网格区域对齐方式 */
.item.i2 {
background-color: #93e8f7;
/* 水平方向 */
/* justify-self: start; */
justify-self: end;
/* justify-self: center; */
/* 垂直方向 */
/* align-self: start; */
align-self: end;
/* align-self: center; */
place-self: end end;
}
</style>
</head>
<body>
<!-- Grid容器 -->
<div class="container">
<div class="item i1">item1</div>
<div class="item i2">item2</div>
<div class="item i3">item3</div>
<div class="item i4">item4</div>
<div class="item i5">item5</div>
<div class="item i6">item6</div>
</div>
</body>
</html>