一、页面css设计流程：
- 参照设计稿得到页面宽度
- 利用margin、padding、position计算出像素距离值
- 写好后进行响应式调整
二、响应式自适应：
- body宽度100%
- 引入js文件，计算单位vw144px。144根据字体计算得到
- 选定元素宽度除以单位vw144px计算自身比例
- 将计算得到的比例值添加单位rem。rem根据字体vw144px自适应
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))
核心代码
核心代码
释义：给根元素字号设置成屏幕宽度的 1/ 10，当屏幕变化时重新计算
因为html就是根元素 根元素字体放大 调距离是方便了 但是内容的字号也会跟着无限放大，显然不合适，所以代码里给body设置了最小正常字号大小
兼容代码
做高分屏兼容，这样你420px 就可以直接写 420 / 144 = 2.92rem
图片实现自适应缩放：
- 方法一：对父容器设定rem宽度与高度，图片自身width:100%
- 方法二： 对图片设定rem宽度
server页面核心代码:
1.line-height 为子元素设置line-height撑开高度
2.max-weight 为子容器设置max-weight，margin： 0 auto；实现内容居中
