移动端布局方法总结
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
网格布局
网格布局:将网页或者一个区域划分成很多的网格
有很多的行和列 产生单元格 制定项目的位置
容器:添加了网格属性的元素
项目:容器下面的直接子级元素
形成网格布局
属性值:grid
网格布局默认是从上到下显示的 在浏览器的显示区域是看不见的 必须审查元素才能看见网格线
总结:
网格布局和弹性盒布局很像 特别是属性
网格的兼容性 旨在pc端使用 并且要在ie
网格布局的使用