网格布局

网格布局

移动端布局方法总结

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

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

上一篇:精讲前端实战项目之移动端网易云首页(附源码)


下一篇:MATLAB 函数 判断一个数是否为素数