1.rem适配
根据提供的效果图都是指定的宽度,如375px,750px等,因此可以在编写html时,一html标签的font-size,假设设置的font-size为375px,然后页面的其他元素便可以根据这个参照点,计算出大小并以rem作为单位。
1.脚本flexble.js , 把html的font-size宽度分成x份。
function setRemUnit() {
var rem = docEl.clientWidth / x
docEl.style.fontSize = rem + 'px'
}
2.在vscode中修改插件的font-size的基准为宽度除以x
3. 引入JavaScriptflexble.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))
2.vw和vh适配
1.vw为视口的宽度的百分比(1vw 为视口宽度的 1%)
2.vh为视口的宽度的百分比(1vh 为视口高度的 1%)
.box{
width: 50vw;
height: 50vh;
background: rgba(255, 0, 0, 0.25)
}
盒子高度和宽度和高度为视口的50%。