移动端自适应适配布局的方法总结

方法一:rem布局(个人最喜欢的方法)
首先确定你的设计稿是基于iphone6还是iphone4/5:

如果设计稿基于iphone6,横向分辨率为750,body的width为750 / 100 = 7.5rem

如果设计稿基于iphone4/5,横向分辨率为640,body的width为640 / 100 = 6.4rem

(1).对视口做如下设置:

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

(2).在index.html入口文件里写:

var deviceWidth = document.documentElement.clientWidth;

document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';  // 注意:iphone6要除以7.5

(3).使用方法:如果设计图上标注高200px, 写 height: 2rem

方法二:固定一个某些宽度,使用一个模式,加上少许的媒体查询
方法三:淘宝的lib-flexible插件
(1).在项目中安装lib-flexible

$ npm install lib-flexible --save

(2).在项目的入口js文件中引入lib-flexible

import 'lib-flexible'

(3).删除该meta标签,需要使用lib-flexible自己生成的 meta name="viewport"来达到高清适配的效果:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

(4).使用px2rem-loader自动将css中的px转换成rem,安装px2rem-loader

$ npm install px2rem-loader --save-dev

(5).打开build/utils.js文件,找到exports.cssLoaders方法,在里面添加如下代码

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUint: 75
    }
  }

(6).修改generateLoaders方法中的loaders

// 注释掉这一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改为
const loaders = [cssLoader, px2remLoader]
 
if (options.usePostCSS) {
  loaders.push(postcssLoader)
}

然后重新npm run dev,打开控制台可以看到代码中的px已经被转成了rem

该插件需要注意以下两点:

    1.此方法只能将.vue文件style标签中的px转成rem,不能将script标签和元素style里面定义的px转成rem

    2.如果在.vue文件style中的某一行代码不希望被转成rem,只要在后面写上注释 /* no*/就可以了
 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值