码迷,mamicode.com
首页 > 移动开发 > 详细

elementui移动端适配-flexble.js和px2rem-loader

时间:2020-05-24 20:46:27      阅读:609      评论:0      收藏:0      [点我收藏+]

标签:art   自己   xib   完成后   屏幕宽度   手动   tail   举例   安装包   

版本:vue-cli@3(3一下版本的配置方法是不一样的)

配置下来没有什么坑,完成配置重启服务, 这个时候F12控制台可以看到px已经转换为了rem,然后就可以自己调整样式了。

1.安装

npm install lib-flexible --save
npm install px2rem-loader --save-dev

2.配置

在main.js中引入flexible.js

import ‘lib-flexible/flexible.js‘

在 @vue/cli-service/lib/config/css.js下添加规则(module.exports)

rule
  .use(‘px2rem-loader‘)
  .loader(‘px2rem-loader‘)
  .options({emUnit:75})

!检查同文件夹下的index.js文件,将<meta name="viewport">标签删除。因为我们要使用lib-flexible自己生成的meta name标签来达到高清适配的效果。

之后重启服务就完成了适配,接下来再自己稍作调整。

此时:

px后面添加/*no*/,就不会转化为rem。一般border需要。

px后面添加/*px*/,会根据dpr的不同生成三套代码。一般字体需要。

.box {
  font-size:14px;/*px*/
  border: 1px;/*no*/
}

(1)html的font-size根据屏幕宽度除以10计算,所以需要设置页面最大宽度是10rem(?)

(2)px2rem-loader自动将css中的px转换为rem,嵌入样式需要自己手动调整(elementui侧边栏width我手动改成了rem)

(3)不支持ipad(清晰度?)

--save,简写-S,安装包信息写入dependencies中(生产阶段的依赖,即项目运行时的依赖)

--save-dev,简写-D,安装包会写入devDependencies中(开发阶段的依赖,只在开发阶段起作用)

举例:

你写 ES6 代码,需要 babel 转换成 es5 ,转换完成后,我们只需要转换后的代码,上线的时候,直接把转换后的代码部署到生产环境,不需要 bebal 了,生产环境不需要。这就可以安装到 devDependencies ,再比如说代码提示工具,也可以安装到 devDependencies 。

如果你用了 Element-UI,由于发布到生产后还是依赖 Element-UI,这就可以安装到 dependencies 。

感谢:https://blog.csdn.net/u011320715/article/details/96978840

elementui移动端适配-flexble.js和px2rem-loader

标签:art   自己   xib   完成后   屏幕宽度   手动   tail   举例   安装包   

原文地址:https://www.cnblogs.com/vera-7c/p/12952451.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!