手写Flexible.js的原理实现，我终于明白移动端多端适配

,今天在看阿里的面试题时，看到这样一道面试题，问flexible.js的原理是什么？,,然而我也不知道，但是刚好我又在我公司的项目上遇到过，于是研究一番，遂作此文。,简单的一句概括就是：flexible.js帮我们计算出1rem 等于多少px。,怎么计算的？,很简单，就是1rem = 屏幕宽度的1/10.,我们知道rem的大小是根据html节点的font-size的相对值。,例如，iphone 6的屏幕宽度为375px，因此1rem === 37.5px。,那帮我们计算出rem的值有什么鬼用吗？,确实，如果只是单纯的计算出rem的值并没什么用。发挥它的用处是当我们根据设计稿来转化成页面时需要用到。,举个例子，现在有两个手机，一个手机的屏幕宽度是375px，一个是750px，设计稿给我们的宽度是375px，那我们按照设计稿的设计在375px的手机上刚好完美匹配，但是却会发现在750px的手机上页面只有一半，空白了一半。,这就是我们需要解决的问题，即怎么解决移动端尺寸众多的问题，我们的设计稿是固定，怎么办，如果设计稿是弹性的可以随意缩放该多好。,好吧，设计只给一张设计稿，我们只能想其他方法啦。,想想，有办法了，就像本来你在一张大的纸上面了一饼，现在让你在小的纸上在画一次要怎么画，就是所有东西都等比例画小，如果要画到更大的纸上也是一个道理，等比画大，对不对。,现在我们把设计稿分成10等份，设计稿 A = W/10，我们把设备可视区域也就是我们的各种移动端设备的这个画布也分成10份，并赋值给根元素的fontSize，我们都知道rem是根据根元素字体大小计算的，所以我们的1rem也就是设备可视区域/10，现在设计稿上有一块区域宽B，那它是不是等比放到设备可视区域的宽度为 B/A rem。,再啰嗦一下，B在设计稿上占B/A份，那在设备可视区域上也要占B/A份对不对，所以宽是B/A rem。这就是flexible.js能实现设备兼容的原理。下面看代码。,这就是flexible.js的源码，超级简单吧。,,就这几行代码就有12k的star，要是我也早点发现这个方案就好了。那star就是我的了。,现在已经实现了将屏幕分为10等份，也就是1rem。,根据我们上面画饼的方案，现在也要把设计稿转化为10等分才行。,我看了下我们项目的实现是用到了postcss-pxtorem插件来实现的。,因为设计稿给我们的是px单位的，所以我们在开发的时候只能写px，然后这就需要postcss-pxtorem来帮我们将我们写的px转化为rem了。,安装完postcss-pxtorem之后的配合非常简单，只要在.postcssrc.js文件配置如下就好了。,rootValue：75 为啥是75呢，这是因为我们的设计稿的宽度是750px，十分之一就是75px。,,如果你们的设计稿是375px的，就需要将值改写成37.5。,我们公司的使用是在flexible.js的基础上进行了更改，主要是添加了这样一段代码。,这一串主要是来实现iphone和安卓的设备像素比不一样的问题，例如iphone的一些手机。,就这么简单的两步就实现了移动端的适配。