解决vue移动端适配问题
解决vue移动端适配问题1.首先把安装amfe-flexible,这里使用npm installnpminstall -S amfe-flexible2.在入口文件中引入import 'amfe-flexible/index.js'3.在根目录的index.html 的头部加入手机端适配的meta代码<meta name="viewport" content=&q
·
解决vue移动端适配问题
1.首先把安装amfe-flexible,这里使用npm install
npm install -S amfe-flexible
2.在入口文件中引入
import 'amfe-flexible/index.js'
3.在根目录的index.html 的头部加入手机端适配的meta代码
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
4.安装px2rem-loader,这里使用npm install
作用:在开发过程中把px转化rem,前提是ui设计的psd图尺寸大小是750*1334,这样我们在iphone6的模拟机上直接使用所标注的尺寸,在浏览器中px2rem-loader插件会把px自动转化为rem。安装命令如下:
npm install px2rem-loader
5.px2rem-loader的配置
在build文件夹中的utils.js中添加:
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
然后在下面的generateLoaders方法当中,修改:
const loaders = [cssLoader,px2remLoader]
5.好了,现在重新运行vue,npm run dev 就可以了。
,如有错误或不足之处,欢迎指正!谢谢!
更多推荐
已为社区贡献1条内容
所有评论(0)