vue 配置移动单位转换插件
首先安装(
自己创建一个vue项目,这儿就直接跳过了)npm i amfe-flexible -S npm i postcss-pxtorem -S 在项目入口文件main.js 中引入
amfe-flexibleimport 'amfe-flexible'; 在根目录的index.html 的头部加入手机端适配的meta代码(
有的话就不用加了)<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 在vue.config.js 中的 css.loaderOptions.postcss 配置
postcss-loader//引入: const autoprefixer = require('autoprefixer'); const pxtorem = require('postcss-pxtorem'); module.exports = { css:{ // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // 启用 CSS modules for all css / pre-processor files. requireModuleExtension: true, // css预设器配置项 loaderOptions: { postcss: { plugins: [ autoprefixer({ overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8" ] }), pxtorem({ rootValue: 37.5,// 配置视窗口尺寸 propList: ['*'] }) ] } } } } 在vue文件中使用:
//app.vue <template> <div id="app"></div> </template> <style> #app{ width: 750px; height: 200px; background-color: red; } </style> 效果展示
如图:红色区域已经转换成功参考链接:
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
