移動端h5響應(yīng)式方案最近這幾年用得最多的最多的就是rem方案了。這個需要計算根元素的font-size來實現(xiàn)響應(yīng)式。
但這種方案也有一個缺點，那就是font-size不為整數(shù)的時候一些字體使用rem單位會導(dǎo)致字體顯示的大小有問題，對視覺還原要求比較高的項目來說這還是令前端開發(fā)挺頭疼的一件事的。
解決前端響應(yīng)式無非就是在不同的設(shè)備下可以正常展示，這里介紹一種不需要rem方式的響應(yīng)式方案。直接使用px，這里說的是基于750px的設(shè)計稿。設(shè)計稿中你量出來是多少px，樣式中
直接寫多少px。這樣是不是很快捷，也不需要rem換算。
- transform
- transform-origin
這里其實就是用到了transform的scale縮放頁面大小來實現(xiàn)響應(yīng)式。
核心代碼：
let screenMatch = () => {
document.body.style.setProperty('visibility', 'hidden')
let page = document.getElementById("page");
let _scale = window.outerWidth/750;
page.style.setProperty("transformOrigin", "0 0");
page.style.setProperty("transform", "scale("+ _scale + ")");
//兼容ios8
page.style.setProperty("-webkit-transform-origin", "0 0");
page.style.setProperty("-webkit-transfrom", "scale("+ _scale + ")");
setTimeout(() => {
page.style.setProperty("transformOrigin", "0 0");
page.style.setProperty("transform", "scale("+ _scale + ")");
//兼容ios8
page.style.setProperty("-webkit-transform-origin", "0 0");
page.style.setProperty("-webkit-transfrom", "scale("+ _scale + ")");
document.body.style.setProperty('visibility', 'visible')
}, 100);
}
screenMatch();
window.onresize = screenMatch;
上述代碼中id為page的是整個頁面元素開始的跟節(jié)點，body下的第一個元素。這里body/html要設(shè)置min-height:100%;height:100%;
其實我們在小程序中也可以使用px單位，但是小程序中使用transform的時候會有一些字體鋸齒的bug，最后換了zoom屬性就好了，同時使用-webkit-zoom做兼容。核心代碼跟h5的差別不大同樣放的是縮放大小。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
