詳解px單位html5響應式方案

行動端h5響應式方案最近這幾年用得最多的最多的就是rem方案了。這個需要計算根元素的font-size來實作響應式。

但這種方案也有一個缺點，那就是font-size不為整數的時候一些字體使用rem單位會導致字體顯示的大小有問題，對視覺還原要求比較高的項目來說這還是令前端開發挺頭疼的一件事的。

解決前端響應式無非就是在不同的裝置下可以正常展示，這裡介紹一種不需要rem方式的響應式方案。直接使用px，這裡說的是基於750px的設計稿。設計稿中你量出來是多少px，樣式中

直接寫多少px。這樣是不是很快捷，也不需要rem換算。

1. transform
2. transform-origin

這裡其實就是用到了transform的scale縮放頁面大小來實現響應式。

核心程式碼：

 let screenMatch = () => { document.body.style.setProperty('visibility', 'hidden') let page = document.getElementById(page); let _scale = window.outerWidth/750; page.style.setPropertyProperty(transformOriginin , 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的是整個頁面元素開始的跟節點，body下的第一個元素。這裡body/html要設定min-height:100%;height:100%;

其實我們在小程式中也可以使用px單位，但小程式中使用transform的時候會有一些字體鋸齒的bug，最後換了zoom屬性就好了，同時使用-webkit-zoom做相容。核心程式碼跟h5的差異不大同樣放的是縮放小。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。