前言
主要解决移动端机型长宽不同的自适应的方案(pc也可适用)
一、淘宝无线适配(淘宝/网易的解决方案) + rem
首先添加下面 js文件(监听窗口大小) 引入到全局中
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
然后在css中所有单位如 height,width,padding 等统一换成 rem 就可以了
ps :可以手动拉动改变窗口宽度看 单位是否是动态改变
二、flex布局+百分比
flex布局是目前前端主流做自适应的方案之一,就不详细说了,主要观察ui图然后自己根据情况布局即可
三、媒体查询
摸鱼时间紧迫,本文暂不介绍,如果有兴趣可以在评论留言,有时间会补上