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

猜你喜欢

转载自blog.csdn.net/weixin_50163576/article/details/120188567
今日推荐