使用lib-flexible
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
使⽤lib-flexible
1.安装lib-flexible
npm i lib-flexible --save
2.在项⽬⼊⼝⽂件main.js中引⼊lib-flexible
import 'lib-flexible/flexible.js'
3.在项⽬根⽬录的index.html 头部加⼊⼿机端适配的meta的代码
meta name="viewport" content="width=device-width, initial-scale=1.0">
4.安装px2rem-loader
在实际的开发中，使⽤flexible插件时会⾃动把px转换成rem单位。
在vue-cli中安装过lib-flexible之后，将px转换成rem，我们将使⽤px2rem 这个⼯具，它有webpack的loader： https:///Jinjiang/px2rem-loader （这是px2rem-loader的github地址）
所以我使⽤了 github上⾯的安装命令：npm install px2rem-loader
5.配置px2rem-loader
在vue-cli⽣成的webpack 配置中，vue-loader 的options和其他样式⽂件loader 最终都是由build/untils.js⾥的⼀个⽅法⽣成的。
我们只需要在cssLoader后⾯加上⼀个px2remLoader即可，px2rem-loader的remUnit 选项意思是1rem=多少像素，结合lib-flexible，我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10，这⾥我们假设设计稿的宽度为750px ,并将px2remLoader 放进loaders数组中const px2remLoader = {
loader: "px2rem-loader",
options: {
remUnit: 40
}
};
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
const loaders = ePostCSS ?
[cssLoader, postcssLoader, px2remLoader] :
[cssLoader, px2remLoader];
6.然后重启后在组件中写单位直接写px 然后在浏览器中的检查就可以看到单位是rem。