1. 程式人生 > >vue手機端專案自適方案

vue手機端專案自適方案

lib-flexible解決移動端自適應


花了一個多小時終於解決了這個問題,最近總是在研究如何做好自適應,搜了很多方法,但是總是感覺不盡人意,比如以實際尺寸除以75得出rem,或者是那種px乘以二的,因為之前不太清楚清楚,導致不能理解。功夫不負有心人,總算總結了一個比較滿意的方法。 利用淘寶給出的lib-flexible,解決。 首先安裝它, npm i lib-flexible --save, 計算起來比較麻煩,為了能直接寫px還應該安裝一個它的兄弟-----px2rem-loder npm i px2rem-loader 安裝完之後需要做的是在main.js引入它 import 'lib-flexible' 最重要的兩步來了,首先註釋掉index.html中的meta=viewport標籤,因為這玩意與flexible會有一定的衝突,
不用擔心,自動的給我們生成了一個,看到沒而且有了根元素的font-size值,此時1rem就是等於這個根元素,不要問我為什麼知道,因為畢竟智慧擔當~~~~哈哈。 如果你不想每次都計算,請配置一下它的兄弟,相當重要的,安裝好後要在build 中until.js修改,把px2rem-loader加在cssLoaders 中和 generateLoaders中。新增位置如下:
1、
要新增的程式碼,是不是很容易懂 const px2remLoader = {     loader: 'px2rem-loader',     options: {       remUint: 75     }   } 2、

別忘了註釋掉之前的const loaders  const loaders = [cssLoader, px2remLoader] if (options.usePostCSS) {   loaders.push(postcssLoader) }