实例演示 rem+vw 布局的原理与 rem 的设置技巧

DPR: 设备像素比
布局视图: 为了保证内容全部显示，一般设置为980px
视觉视图:
移动设备的布局视图: 375px、width = device-width
width: 页面的布局的宽度
device-width: 视觉视图的宽度, 设备宽度
width = 980px
device-width: 375px

width = device-width
width = 375px
当前的布局视图,就是当前移动设备浏览器的可视区宽度
1. 布局视图 = 视觉视图 : width = device-width
initial-scale=1.0: 1: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>