Open wolichuang opened 3 years ago
一、安装lib-flexible
npm i lib-flexible -D
二、在main.js中引入
import 'lib-flexible/flexible'
三、在index.html文件中设置meta标签:
<meta name='viewport' content='width=device-width , initial-scale=1.0'>
四、然后在项目中写css时会自动将rem转化为px,需要安装px2rem这个工具
npm i px2rem-loader -D
/build/util.js:
a、在cssLoader对象下面添加一个px2remLoader对象:
const px2remLoader = { loader : 'px2rem-loader', options : { //这个参数是通过psd设计稿的 宽度 / 10 来计算,这里以750为标准 remUnit : 75 } } b、然后将utils.js文件中的generateLoaders函数的loaders常量改为[cssLoader, px2remLoader]
const loaders = [cssLoader, px2remLoader]
4.2 无build文件夹(使用了vue cli3或3以上版本) 在项目根目录下新建vue.config.js文件
const cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } // 新增px2remLoader const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } }
function generateLoaders (loader, loaderOptions) { // 新增px2remLoader const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } }
重新启动项目,即可自适应(单位使用px)
一、安装lib-flexible
二、在main.js中引入
三、在index.html文件中设置meta标签:
四、然后在项目中写css时会自动将rem转化为px,需要安装px2rem这个工具
a、在cssLoader对象下面添加一个px2remLoader对象:
const px2remLoader = { loader : 'px2rem-loader', options : { //这个参数是通过psd设计稿的 宽度 / 10 来计算,这里以750为标准 remUnit : 75
} } b、然后将utils.js文件中的generateLoaders函数的loaders常量改为[cssLoader, px2remLoader]
const loaders = [cssLoader, px2remLoader]
const cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } // 新增px2remLoader const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } }
function generateLoaders (loader, loaderOptions) { // 新增px2remLoader const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } }