在上一步創(chuàng)建好“webpack”模板項目后嫌蚤，需要修改一下項目配置
src/app.vue設(shè)置
首先是把src/app.vue中的logo去掉
然后根據(jù)需要去除瀏覽器的一些默認樣式
src/main.js設(shè)置
由于要做移動端開發(fā)適配,因此在main,js中導(dǎo)入rem轉(zhuǎn)px函數(shù)公式,本人在src下新建了config目錄,并在config目錄下新建了rem.js文件
src/config/rem.js
rem.js里主要就是rem轉(zhuǎn)px函數(shù)公式
(function () {
function a() {
var b = document.documentElement.clientWidth;
b = b > 750 ? 750 : b; //750是設(shè)計稿大小,如果頁面是1920請寫1920
var c = b / 750 * 100;
document.getElementsByTagName("html")[0].style.fontSize = c + "px"
}
a();
window.onresize = a
})();
這樣rem文件就已經(jīng)啟用了,然后是路由配置
src/router配置(路由配置)
在src/router/index.js下配置路徑,可根據(jù)需要配置,由于本次項目只有Home和Detail頁面,因此只配置了兩個
自建頁面文件夾src/pages
咱們把頁面文件統(tǒng)一放在pages,新建home.vue和detail.vue文件
根目錄下的index.html配置
再加入以下代碼,完成移動端配置
- 常見content參數(shù)
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放 0為禁止
安裝插件 px2rem-loader
為了方便我們在開發(fā)時自動把px轉(zhuǎn)化成rem,我們安裝一個px2rem-loader插件,如果心算能力強的小伙伴可以不用裝
cmd或git中輸入cnpm install px2rem-loader即可安裝
配置build/utils.js
build/utils.js中可以配置px2rem-loader的相關(guān)參數(shù),本文在此配置為每rem為50px,如圖配置:
代碼:
var px2remLoader = {
loader:'px2rem-loader',
options:{
remUnit: 50
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
- 該插件可以使用注釋/no/來取消局部的px轉(zhuǎn)換成rem
如:
width: 20px; /*no*/
自此,項目搭建配置完畢
Q1:如果我想這個px2rem作用到全局assets里面的CSS樣式怎么配置呢辐益？
需要安裝另一個插件postcss-pxtorem。
1脱吱、在全局下安裝插件：
npm install -D postcss-pxtorem
2智政、然后會生成一個js文件：
在文件中需要進行配置：
'postcss-pxtorem': {
rootValue: 16, //設(shè)計稿元素尺寸/16，比如元素寬320px,最終頁面會換算成 20rem
propList: ['*']
}
配置完之后箱蝠，在css文件中可以寫隨便一個px單位的屬性值來測試续捂。
然后重啟項目測試一下垦垂。
歡迎點贊收藏,希望本文能幫助到您,感謝您的支持
