移动Web开发基础-flexible布局方案
概述
前面咱们已经已经了解了两种基本的布局方案，移动Web开发基础-百分比+flex布局方案 和 移动Web开发基础-rem布局，其中rem布局方案和咱们今天要了解的flexible布局方案是有关系的，由于这两种方案布局元素的单位都是rem，他们的区别在于前者是固定viewport缩放值，而flexible布局方案是根据设备像素密度比DPR动态修改viewport，下面咱们来具体了解下吧。css
基本了解
1.flexible布局方案是手淘团队在实际应用中总结出来的一套适配方案
2.GitHub地址：https://github.com/amfe/lib-flexible
3.详细学习参考：使用Flexible实现手淘H5页面的终端适配html
理解
flexible布局方案主要处理三件事情前端
1.动态改写<meta>标签
2.给<html>元素添加data-dpr属性，而且动态改写data-dpr的值git
3.给<html>元素添加font-size属性，而且动态改写font-size的值github
以下图
web
从iPhone 6的设备上能够看出，淘宝约定了 1rem = 75px，若是你说计算不方便的话能够尝试去使用相应的一些插件。
由于经过viewport缩放解决了Retina显示屏倍率的问题，因此这种方案能够完美解决1像素的问题，能够直接设置边框为1px。若是你对Retina显示屏还不太了解的话能够看这里 移动Web开发基础-Viewport。移动web开发
data-dpr的做用是什么？svg
由于rem布局中，通常阅读类型的页面文字是不建议用rem做为单位的，因此咱们就须要根据不一样的像素密度比对同一元素设置不一样的字体大小，这样更符合系统的设计原则。以下图布局
总结
本文主要分析了淘宝flexible布局方案的三个关键点，相信你们对原理了解清楚了以后就更容易在实践中应用它了，固然，除了目前介绍的几种布局方案以外呢，还有利用CSS3的VW、VH单位进行布局的方案，具体能够学习 大漠老师的文章 再聊移动端页面的适配。学习
固然在使用rem布局方案的同时，也相应的能够知道一下几点内容：
1.阅读类型的页面文字尽可能不用rem做为单位，由于这不符合设备系统的设计原则，也就是说不一样屏幕宽度的设备，用户但愿看到的是更多或更少的文字，而不是更大或更小的文字。这就比如吃红烧肉，小碗装的是小块的肉，你不能由于你换了个盆装就把红烧肉切成豆腐块那么大吧，由于用户最终但愿的仍是想要一小块刚恰好放嘴里的红烧肉。
2.设备最大宽度。在body元素上能够设置最大宽度，这样作的目的是为了避免至于在一些特殊状况好比在PC上打开页面的时候页面上的内容很是很是大。
3.图标元素设置必定的容错空间。由于rem做为布局单位是经过计算最终转化成px做为单位的，这样有时就会由于取舍形成小数像素的偏差，布局的时候还好，可是用在如雪碧图图标上时有可能出现切边，因此这种场景下能够考虑使用 iconfont或者使用 background-image时，尽可能为背景图设置必定的空白间隙，以下图。
图片来源： rem 产生的小数像素问题(淘宝前端团队（FED）)
另，若是想了解更多移动web开发的基础知识，能够关注个人专栏 移动Web开发实战，谢谢！