移动Web开发基础-百分比+flex布局方案

前言

移动端适配是一个非常繁琐的问题，当然，只要掌握了一些基础的布局方式之后，适配问题也不再是大问题。其实也没有非常死板的适配方案，一般实际开发过程中也是根据项目实际情况采取不同的适配方案或者混合使用几种。目前常用的布局适配方案有百分比+flex布局；以淘宝首页为代表的 rem+viewport缩放 flexible 布局方案；固定viewport，通过js动态修改html字体大小的rem布局，这里我先介绍第一种。

案例

腾讯课堂：https://m.ke.qq.com/
大家可以看下腾讯课堂移动端页面的写法，就是采用基本的布局方式，使用px和百分比混合作为单位，用垂直方向padding（padding-top或padding-bottom）实现等比例盒子，使用flex弹性布局，这几种方式的混合使用，就可以实现设备适配，而且书写方式和PC一样，只不过元素尺寸都要写750设计稿的一半。

说明：以设计稿750像素为例，我们布局时都按一半算。
具体示例：

1.和PC一致的书写，这里有个重点就是什么时候固定宽度，因为如果一个元素是700px，那你写的时候肯定不能写350px，如果这样的话在350px宽以下的设备下，该元素是展示不全的，会溢出甚至造成布局错乱。建议如果元素尺寸超过页面尺寸一半时，采用百分比或者flex布局，小于一半时固定宽度没什么问题。

2.使用垂直方向padding（padding-top或padding-bottom）实现等比例盒子，图片等比例缩放。
使用padding实现比例盒子的原理是，当希望一个元素宽高比例保持不变，宽度百分比是根据父元素宽度计算，但是高度用百分比来写的话，值是根据父元素的高度来算的，但是一般父元素高度不是固定的，而且固定了也不一定满足元素的等比例伸缩要求。所以思考有没有哪个属性尺寸百分比单位是根据父元素宽度来计算的，答案是有，padding就可以，用垂直方向padding与父元素宽度的百分比计算关系，实现盒子的等比例缩放。





3.flex布局，在腾讯课堂上面倒是没有发现用到这种布局，可能是兼容性要求或者其他原因吧，不过没关系，这不妨碍我们来学习flex布局在配合其他布局方式时的使用。
flex布局的特点是弹性，能实现元素布局的自适应，但是缺点是当子元素的宽度（这里包括border，padding，margin）加起来已经超过比如比较小的屏幕尺寸320px时，元素会展示不全，这时就需要通过媒体查询来调整元素的布局了，所以对于多个固定宽度元素的flex布局可能会比较繁琐。





像这里要使用flex布局的话，在iphone 4/5 小屏幕设备下，元素可能展示不下，所以需要媒体查询的配合调整。

总结

这里主要了解了在移动端和PC端书写方式一致的布局，和利用padding百分比单位的计算实现比例盒子，以及flex布局方便的实现复杂布局时需要注意的边界溢出问题，掌握并熟练以上知识点，就能很好的实现移动端web页面布局。下篇我们就来聊聊rem布局。