黑马程序员技术交流社区

标题: 移动端布局 [打印本页]

---

作者: 凯心永恒    时间: 2019-10-10 08:46
标题: 移动端布局
1、百分比布局
百分比布局也叫流式布局，比较简单，但有些细节的地方还需要用媒体查询来做兼容。做起来挺费时间，而且对于设计稿的还原也不好。不怎么推荐。
2、flex布局
操作方便，布局极其简单，移动端使用比较广泛，pc端浏览器支持情况比较差，IE11或更低版本不支持flex或仅支持部分。原理就是通过给父盒子添加display:flex属性，来控制子盒子的位置和排列方式。
3、rem+less+媒体查询     flexble.js
我现在常用的移动端布局主要是用rem布局，这个应该是比较多人使用的，也是比较流行的。使用rem布局优点是可以适应多个屏幕 ，也比较好的还原设计稿。在有些地方需要一屏显示完设计稿的时候，可能需要用到flex,或是百分比。
rem布局简单来说就是根据页面的font-size的大小来设置页面元素的属性;
flexible+rem流程如下：
根据设计稿宽度，确定要分多少份，计算出一份多少px （flexible帮助我们做了）
比如设计稿750px，flexible会分10份，一份75px，那么html的font-size就为75px，也就是1rem是75px
通过，媒体查询，计算出不同分辨率下的font-size (flexible帮助我们做了：setRemUnit)
页面元素大小通过插件帮助我们做除法运算算出占多少rem：设计稿大小 / font-size = xx rem.

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2