移动端布局:
第三种方式: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