頁面適配移動端
阿新 • • 發佈:2022-03-28
前提:我使用的是vue-cli2建立的專案其中使用了vant移動端元件庫,近期有專案需要專案適配大屏的需求。但是由於平時我們使用的元件庫的單位都是px 所以頁面需要適配pc和移動端。所以進過大佬點撥找到了2個解決方案
-
px2rem-loader
將px轉換為rem適配移動端
下載以下兩個依賴npm i lib-flexible --save
npm i px2rem-loader
在main.js中引入import 'lib-flexible/flexible'
然後在build資料夾中找到utils.js 將px2rem-loader 新增到cssLoaders中,
同時,在generateLoaders方法中新增px2remLoader
exports.cssLoaders = function (options) { options = options || {} const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } // -----重點----- const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 40 } } const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap } } // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { // -----重點----- const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } } // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: generateLoaders(), // less: generateLoaders('less'), less: generateLoaders('less', { modifyVars: { 'hack': `true; @import "${path.join(__dirname, '../src/styles/resetui.less')}";` } }), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } }
配置完之後重啟服務即可。
2. 通過配置ui元件的重置樣式將所有用到的px單位都改成rem。
不管是element 還是vant都是支援重置樣式的基礎變數的。再根據自己的UI設計,將基礎變數都重置成為rem。然後動態的設定root的font-size就可以實現原有UI元件庫支援rem的響應式。