解决vue移动端适配问题

1，先看看网上关于移动端适配讲解

再聊移动端页面适配，rem和vw适配方案！

基础点：rem相对根节点字体的大小。因此不用px; 根字体：字体的大小px; px：你就当成cm(厘米)这样的东西吧； 基准：750设计稿；

这是方案的基础理论，在这个基础上，咱们还要搞明白，到底要干一件什么事情！

目标一 、手机适配：就是页面上的尺寸，不管高度，仍是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是否是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿

目标二、px转换成rem：通常UI给的设计稿宽度大小是750，因此，咱们想直接写上面UI标记的尺寸；——最大程度减小工做

为何选择rem? 好久以前没有vw，怕vw的兼容问题，就用了rem；也就是：rem的兼容性>vw的兼容性； 还有一种就是本身写百分比很不优雅

---

1、理论基础！

实现目标一

用rem就能够了吧！由于rem就能够随根字体大小改变而改变，从而实现了自适应的功能。 可是，可是，重点来，若是，根字体的大小默认是16px；那么，咱们的1rem；就永远是16px，懂么？也就是若是设计稿是750（放大了一倍，iphone是375pt),咱们想要个50%的大小: 50%*357px/16=11.718rem 若是咱们写一个11.718rem的宽度，然而这只能在能iphone6还原设计稿，也就是只有在iphone6上这样的宽度才恰好占一半； 那么问题来了，若是在每一个屏幕上都是50%呢，直接改变根字体大小（16px)不就完了么！！；11.718rem永远仍是那个11.718rem，不用担忧；

实现目标2、

用工具，webpack，postcss,postcss-pxtorem

2、准备主要工具！

viewport: 建议自行百度；

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
复制代码

vue-cli: 用这个主要是用webpack,这个构建工具大大下降了webpack的使用难度;快速构建出一个前端项目。

postcss: 官网解释：PostCSS is a tool for transforming styles with JS plugins，就是postcss用js插件帮你转换css样式的一个工具。好比，这里的把你的文件里面16px替换成1rem(根大小默认16px的状况）；这样你就不用本身去算了！

postcss-pxtorem: postcss的一个插件，主要是帮你把px转换成对应的rem； 而后：还要用js代码去动态算根目录应该有的字体大小，反正就是一段js代码去动态获取屏幕宽度！

3、rem——开始干！

第一步，先用vue-cli快速构建出一个项目，而后，安装postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url；

第二步，在项目根目录下添加.postcssrc.js文件，在里面写上

module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 32, propList: ['*'], minPixelValue: 2 } }};
复制代码

rootValue，这里就是根目录的字体大小是32px，这里为啥设置成32呢，由于通常设计稿是750，比iphone6的大一倍，因此设置成16的两倍，就是32px;proplist就是那些属性须要转换成rem，这里是所有的意思； 好比你可选择设置； propList: ['font', 'font-size', 'line-height', 'letter-spacing'] minPixelValue就是最小转换单位，这是最小转换单位是2px的意思；

第三步，动态设置根字体大小！一段简单的js插入在head里面；

(function() {
    function autoRootFontSize() {
        document.documentElement.style.fontSize =        Math.min(screen.width,document.documentElement.getBoundingClientRect().width)  /  750 * 32 + 'px';
          // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是本来是750大小的32px;若是屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是否是很简单
    }
    window.addEventListener('resize', autoRootFontSize);
    autoRootFontSize();
})();
复制代码

这里，我想说的是彻底能够用vw去设置根字体大小，26px/375px=4.267vw;就不用js去算了！ html{font-size:4.267vw}; //由于这个字体大小彻底是随屏幕正比变化；

4、vw——开始干！ vw的方案就简单多了，由于vw原本就相对屏幕的百分比，因此咱们不用再去动态的改变根字体大小了，只须要把750上的px大小转换成对应的vw值就完了，这一步交给postcss工具就能够！ 因此只须要两步！ 第一步，先用vue-cli快速构建出一个项目，而后，安装postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url

第二步，在项目根目录下添加.postcssrc.js文件，在里面写上

module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { utf8: false }, "postcss-cssnext": {}, "postcss-px-to-viewport": { viewportWidth: 750, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false }, "postcss-viewport-units": {}, }}
复制代码

viewportWidth是你设计稿的大小750，而后unitPrecision是vw值保留的小数点个数；

5、总结！

首先明白一件事：px就像cm同样，1px永远是1px;1cm永远是1cm； 那么咱们从目标再反推一道逻辑： 咱们想要的结果很简单: 一个元素的宽度（px) / 屏幕宽度(px) = 定值 （这个定值就是设计稿上面的值比例定值）；

——因此要作就是：屏幕变宽，要让元素宽度就变宽。 然鹅，咱们写的代码里面的px是不可能变的（取的750设计稿上面的尺寸）；那么postcss编译出来的rem值也是不变的；

咱们是怎么把设计稿里面的40px换算成相应rem的呢；你只要记住根字体大小的值（浏览器的默认是16px，如今设置成的32px)就是1rem；这交给工具同一去算； 获得：元素的宽度(px) = 元素的宽度（rem) ✖️32; 因此这个32是你必需要设置在postcss-pxtorem里面的；这样它就能够帮你算； 又由于： 元素的宽度(rem) ✖️ 根字体大小（px) = 元素的宽度（px) 元素的宽度（px) 变大， 元素的宽度(rem) 不变，那就只有改变根字体大小（px) ，变大；具体怎么变，上面的js代码已经解释了；

——因此咱们作的就是：屏幕变宽，让根字体大小（px) 变宽，元素宽度就变宽。 750屏幕下是写的样式大小是1:1, 因此 又由于咱们想要：根字体大小（px) / 屏幕宽度(px) = 32 / 750
因此： 根字体大小（px) = 32 / 750 ✖️ 屏幕宽度(px)

一个元素的宽度（px) / 屏幕宽度(px) = 定值 → 根字体大小（px) ✖️元素的宽度（rem）/ 屏幕宽度(px) → 32 / 750 ✖️ 屏幕宽度(px) ✖️元素的宽度（rem）/ 屏幕宽度(px) 等于什么？？ 获得的的是一个与屏幕大小无关的定值！

化简： 元素的宽度（rem）✖️32 / 750 = 元素的宽度（px) / 750 ——不就是设计稿上面的比例么！！！

---

验证以上操做出来的结果是否符合预期也很简单： 好比一个img的宽，高，在iphone6上的尺寸（审查元素的大小！px单位）： 根字体:16px; postcss算出来的rem值是2.5rem; 2.516=40px; 实际上也是40px; ——获得元素实际大小 40✖️40（px), 屏宽是375；比例是40/375=0.10667; 在iphone5上的尺寸（审查元素的大小！px单位）： 根字体：13.6533px; postcss算出来的rem值是2.5rem; 2.513.6533=34.13px; 实际上也是34.13px; ——获得元素实际大小 34.13✖️34.13（px), 屏宽是320；比例是34.13/320=0.10665;

---

2，本身项目适配配置(实践)

上的文章讲的理论和方法是可行的，本身项目的解决方案和他大同小异（主要用rem）： 1，插件：amfe-flexible + postcss-px2rem amfe-flexible：自动根据不一样设备改变data-dpr的值，这样就能够根据不一样的data-dpr设置字体大小不变，仅放大相应倍数。

postcss-px2rem：打包的时候把项目里面的px统一转换成rem，转换的基准值根据配置设置的（.postcssrc.js） /由于我是以750px(iphone6)宽度为基准，因此remUnit为37.5/

---

通过试验结果：

postcss-px2rem：只负责把项目里面的px按照基准值转换成rem，并不负责根节点动态font-size的计算。

例如，代码里面有个高度固定：180px， 基准值是：37.5， 那最后界面上的rem=180/37.5=4.8rem 无论换不一样客户端手机，不一样分辨率，界面上都是固定4.8rem【rem的值是固定的，根据根节点的font-size不一样，在界面显示的px也不一样】，界面上显示的px = 16（没有设置font-size的话默认是16px）* 4.8rem = 76.8px

【那么这个基准值：37.5怎么来的：

rem基准值计算 关于rem的基准值,也就是上面那个37.5px实际上是根据咱们所拿到的视觉稿来决定的,主要有如下几点缘由: 1.因为咱们所写出的页面是要在不一样的屏幕大小设备上运行的,因此咱们在写样式的时候必需要先以一个肯定的屏幕来做为参考,这个就由咱们拿到的视觉稿来定;假如咱们拿到的视觉稿是以iphone6的屏幕width=375px为基准: ar docEl = document.documentElement; var width = docEl.getBoundingClientRect().width; var rem = width / 10; 这样计算出来的rem基准值就是37.5(iphone6的视觉稿),这里为何要除以10呢,其实这个值是随便定义的,由于不想让html的font-size太大,固然也能够选择不除,只要在后面动态js计算时保证同样的值就能够

】

上面的组件只负责转换rem，并无根据不一样设备设置font-size，下面再加入这个组件amfe-flexible:

不一样设备下的font-size不一样。