欢迎光临
我们一直在努力

基于 vue-cli3.0 的移动端项目适配

文章目录

基于 vue-cli3 的 vue 移动端样式适配

简介

  • lib-flexible 为页面自动添加 标签,根据屏幕分辨率大小的不同,调整根元素html的font-size的值从而达到每个元素宽高自适应变化,以适配不同的屏幕。
  • postcss-px2rem 会将px转换为rem。

安装

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

lib-flexible

由于 lib-flexible 过于陈旧,因此在我们使用之前需要修改其代码配置。

if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    // 在下面判断条件中添加 || isAndroid 选项,因为现在安卓也有高清屏
    if (isIPhone || isAndroid) {
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        dpr = 1;
    }
    scale = 1 / dpr;
}

修改好配置后我们把这个flexible.js文件单独拉出来,然后在main.js中引入就可以了。要注意在index.html中不能含有 标签,否则flexible将不起作用。

postcss-px2rem

vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多,将一些默认配置进行了更好更严密,让开发变得更高效的封装。

px2rem的配置放在vue-cli3项目根目录下的vue.config.js中(如果找不到,就自己创建一个)。

具体配置如下

module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5
              })
            ]
          }
        }
    },
}

配置好后,就可以优雅的进行移动端项目开发了。要注意remUnit的配置,我们只需要设置为设计图的1/10即可。

赞(0) 打赏
未经允许不得转载:散人研 » 基于 vue-cli3.0 的移动端项目适配
分享到: 更多 (0)

评论 抢沙发

6 + 2 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏