首页 > 其他 > 详细

网格布局

时间:2021-08-29 20:53:07      阅读:27      评论:0      收藏:0      [点我收藏+]

网格布局

移动端布局方法总结

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

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

网格布局

原文:https://www.cnblogs.com/xsc1234/p/15196427.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!