网格布局

移动端布局方法总结

1.媒体查询+rem

媒体查询改变不同设备下的字体大小

rem根据字体大小进行计算

缺点计算麻烦 有误差

2.vm+rem

vm，视口单位

html{font-size：0.3125/0.2267vm}

缺点：设置盒子的时候 盒子里面的子级元素会往下掉

3.移动端布局的第三种方法 flexible.js插件

淘宝插件 阿里系的软件都在使用

插件是针对于750px设计图设计的（自动生成dpr 动态像素比）

使用方法

需要将页面中的视口便签删除掉

引入相应的js插件文件

计算：物理像素/100=？rem

在工作中写移动端很少自己去手动计算

rem

hotcss

px2rem

 

网格布局

网格布局：将网页或者一个区域划分成很多的网格

有很多的行和列 产生单元格 制定项目的位置

容器：添加了网格属性的元素

项目：容器下面的直接子级元素

形成网格布局

属性：display

属性值：grid

网格布局默认是从上到下显示的 在浏览器的显示区域是看不见的 必须审查元素才能看见网格线

总结：

网格布局和弹性盒布局很像 特别是属性

网格的兼容性 旨在pc端使用 并且要在ie

网格布局的使用 建议在小的布局使用