现在移动端设备千差万别,用一套样式已经很难满足需求,先从简单的样式大小类说起,小屏手机整体偏小,大屏样式整体偏大,即根据屏幕大小自适应调整整体样式的大小。
第一反应,用rem,给定一个base,这个base(一般是指html的font-size值)在程序最开始,根据屏幕大小设定好,剩下的样式大小设置都是根据这个base转化成对应rem值,那么所有的样式也就基本达到自使用了,给出一段设置base的js代码(基于14px设计)
window.onload = () => {
var html = document.documentElement
var width = html.getBoundingClientRect().width
html.style.fontSize = width * 14 / 375 + 'px'
console.log('width', width)
}
当然自己每次算rem也是头疼,sublime有一个插件cssrem,可以设定好后,直接给到px值就能转化成rem。
之后发现有一个插件postcss-px-viewport,webpack类打包工具中配置后设计的初始值,它将自动根据屏幕的大小,生成对应比例的样式,所有的样式只需按设计初始值给出,就用对应px不需要转换。
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
postcss: [
require('postcss-px-to-viewport')({ // 根据屏幕大小转换样式
viewportWidth: 375
}),
require('autoprefixer')({ // 为样式自动添加前缀
browsers: ['last 3 versions']
})
]
}
}
]
}