px2rem-loader 适配

px2rem-loader（Vue:将px转化为rem，适配移动端）

使用的是vue-cli+webpack，通过npm来安装的
npm i lib-flexible --save
在main.js中引入lib-flexible
import ‘lib-flexible/flexible’
通过meta标签，设置设备宽度以及缩放比例
meta name="viewport" content="width=device-width, initial- scale=1.0"
安装px2rem-loader
npm install px2rem-loader
配置px2rem-loader
在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：

const cssLoader = {loader: 'css-loader',options: {sourceMap: options.sourceMap}
}const postcssLoader = {loader: 'postcss-loader',options: {sourceMap: options.sourceMap}
}const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 75 // 设计稿是750px高}}

同时，在generateLoaders方法中添加px2remLoader

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})})}if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader'})} else {return ['vue-style-loader'].concat(loaders)}
}

px2rem-loader 适配相关推荐

cli3 px转rem适配移动端_Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
今天,我们使用vue cli3 做一个移动端适配 . 前言首先确定你的项目是vue cli3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -s 2.在 ...
Vue CLI3 移动端适配【px2rem 或 postcss-plugin-px2rem】
今天,我们使用Vue CLI3 做一个移动端适配 . 前言首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在m ...
pc端移动端适配rem插件方式
vue-屏幕适配方案一,PC端适配开发PC端项目,通常会要求适应各种的屏幕尺寸,并且要求浏览器缩小页面等比例变化,因此就要求写出来的前端页面是能够自适应的. 利用webpack配置px2rem-l ...
Vue项目pc端适配方案（scss）
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
vue-cli使用px2rem 或 postcss-plugin-px2rem px转换rem
1.安装插件 (1)安装px2rem-loader(devDependencies) npm install px2rem-loader --save-dev (2)移动端适配解决npm包 " ...
vue-cli3.0 使用px2rem 或 postcss-plugin-px2rem
px2rem 构建项目(vue-cli3.0) vue create hello-world (Manuall select features) 安装px2rem-loader(devDependen ...
vue-cli 3.0 配置px2rem 或 postcss-plugin-px2rem
px2rem 构建项目(vue-cli3.0) vue create hello-world (Manuall select features) 安装px2rem-loader(devDependen ...
H5新人福音~零配置搭建现代化的前端工程
X-BUILD一套基于Webpack(v4.21.0)快速搭建H5场景开发环境的脚手架,只需要几分钟的时间就可以运行起来.X-BUILD是针对H5开发的一套自动化构建工具,致力于提升开发效率,减小开发 ...
vue项目实现pc端和手机端屏幕自适应
1.安装flexible插件 yarn add lib-flexible -S 下载淘宝的flexible插件,-S为产生依赖 2.安装px自动转换成rem的插件 yarn add px2rem-lo ...
Nuxt(安装部署)爬坑指南
Nuxt.js使用详细说明这篇文章主要向大家介绍Nuxt爬坑,主要内容包括基础应用.实用技巧.原理机制等方面,希望对大家有所帮助. https://www.shangmayuan.com/a/dcd ...

px2rem-loader 适配

px2rem-loader（Vue:将px转化为rem，适配移动端）

px2rem-loader 适配相关推荐

最新文章

热门文章