一种简单的移动端屏幕适配方案
关于移动端屏幕适配的文章网上有很多,大部分都写的很好,而本文是我自己观摩各路大神的文章后的小小总结。
flexible方案
说到移动端适配,总不免会提到阿里的flexible方案。对于flexible,我总结出以下几点:
- 使用rem实现等比缩放:
- 使用js动态设置html标签的font-size
- 将屏幕宽度按10rem进行计算html标签的font-size
- 为了以后vh、vw兼容
- 计算非常麻烦,生产中要使用css处理器或编辑器插件辅助计算
- 动态设置meta的scale属性
- 为了实现1px线
- 为了兼容部分安卓机,将所有安卓按dpr=1来计算,所以安卓机的1px线要另外实现
简化方案
鉴于我现在的技术环境,从我个人的技术角度看,第二点和第三点是挺没有必要,我只需要等比缩放就行了XD。所以,1px线一律使用伪元素和transform的scale实现;rem的计算方法也是尽量为了写样式时方便,故使用设计图100px 等于 样式1rem的方式计算html的font-size 。
代码如下:(必须要在所有css代码之前引入该js,以免让用户看到错乱的样式)
;(function (window) {
/* 设计图一屏的宽度,根据实际设计情况修改 */
var docWidth = 750
var doc = window.document,
docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
var refreshRem = (function setRem () {
var clientWidth = docEl.getBoundingClientRect().width
docEl.style.fontSize = 100 * (clientWidth / docWidth) + 'px'
docEl.setAttribute('style', 'font-size:' + docEl.style.fontSize + ' !important')
return setRem
})()
if (!doc.addEventListener) return
window.addEventListener(resizeEvt, refreshRem, false)
doc.addEventListener('DOMContentLoaded', refreshRem, false)
// 可在html元素添加data-dpr属性便于作细化适配
})(window)
写样式的时候,设计图上的宽50px,我们写 width:0.5rem 就可以了,换不同大小的屏幕时,会自动作等比缩放!
还有一种更粗暴的方式,就是直接设置 meta 标签里的 viewport 宽度(不知道为什么网上没人用,可能有不可解决的兼容性问题):
<meta name="viewport" content="width=750, user-scalable=no">
750是设计图的宽度,可根据实际情况修改,然后写 css 的时候,设计图上面是100px,css 上也是写100px!
安卓4.4以下可能存在兼容性问题,需要动态设置 minimum-scale 和 maximum-scale
借用打牛的代码: legolib/smart-viewport
另外,使用了固定 viewport 后
@media (max-width:720px){
...
}
媒体查询不管用了,因为里面的 width 判断的就是 viewport 的宽度,固定了 viewport 之后,不管你是什么屏幕,他的 width 都是750了~
与第一种方法相比,前者设置文字大小时可以使用px,使文字不缩放;后者则无法实现文字不缩放