移动端适配

最近公司要做一个H5混合app，主要是将h5嵌入到安卓app内，以往写移动端的时候，我都是一套适配js走天下的，这次与组长商量后，决定使用Vant-ui+px2rem的适配方式。

先奉上走天下的移动端适配方法，适配简单，只是写样式的时候需要口算一下，px转rem，会略微麻烦一些。记得要设置最大宽度，不然在web上预览会有非常大的兼容问题。

1
2
3
4
5
6
7
8
9
10
11
// 适配不同分辨率，根据不同设计图修改750值即可
(function (win, doc) { 
  if (!win.addEventListener) return; 
  var html = document.documentElement; 
  function setFont() { 
    var cliWidth = html.clientWidth; 
  html.style.fontSize = 100 * (cliWidth / 750) + 'px'; 
} 
  win.addEventListener('resize', setFont, false); 
  setFont(); 
})(window, document);

接下来说说Vant-ui的适配是怎样做的吧：
主要是还是引入了第三方组件 px2rem的方式

安装flexible.js

1
npm install postcss-pxtorem amfe-flexible

在main.js中

1
2
3
4
5
import 'amfe-flexible/index.js'

import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)

配置postcss.config.js

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'ios >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

最后别忘了，一定要index.html文件下修改适配方式

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

另外补充一下content的配置项

1
2
3
4
5
6
width // 设置 viewport 的宽度，正整数/字符串 device-width
height // 设置 viewport 的高度，正整数/字符串 device-height
initial-scale // 设置设备宽度与 viewport大小之间的缩放比例，0.0-10.0之间的正数
maximum-scale // 设置最大缩放系数，0.0-10.0之间的正数
minimum-scale // 设置最小缩放系数，0.0-10.0之间的正数
user-scalable // 如果设置为 no 用户将不能缩放网页，默认为 yes，yes / no