h5 day18笔记 2021.09.08

移动端布局：

第三种方式：flexible.js插件 淘宝前端 淘宝插件 阿里系软件都在使用这种适配方式

- 针对于750px的设计图而设计(自动去计算dpr的)

计算步骤：

- 将页面中的视口标签删除

- 引入相应的js插件文件

- 计算方式: 物理像素/100 =?rem

在工作中适配移动端常用的方法：

- rem插件

- px2rem

- hotcss

网格布局：display:grid

- 在浏览器中是不会显示网格的 需要在控制台里面审查元素才能看见

属性:

1.grid-template-columns: 列/宽度

2.grid-template-rows:行/高度

属性值：

- 数值+单位(px)

- % 百分比

- auto

- 混用

- fr fraction 自适应单位 1fr 宽高大小进行平分

例子：（三行三列，有几行几列就需要写几个对应的属性值）

display: grid;

grid-template:

"a1 a1 a3" 1fr

"a4 a5 a6" 1fr

"a7 a8 a9" 1fr

/1fr 1fr 1fr