px單位html5響應式方案

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

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

解決前端響應式無非就是在不一樣的設備下能夠正常展現，這裏介紹一種不須要rem方式的響應式方案。直接使用px，這裏說的是基於750px的設計稿。設計稿中你量出來是多少px，樣式中

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

• transform

• transform-origin

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

　　核心代碼：

 1 　　　　 let screenMatch = () => {
 2             document.body.style.setProperty('visibility', 'hidden')
 3             let page = document.getElementById("page");
 4             let _scale = window.outerWidth/750;
 5             
 6             page.style.setProperty("transformOrigin", "0 0");
 7             page.style.setProperty("transform", "scale("+ _scale + ")");
 8             //兼容ios8
 9             page.style.setProperty("-webkit-transform-origin", "0 0");
10             page.style.setProperty("-webkit-transfrom", "scale("+ _scale + ")");
11             setTimeout(() => {
12   
13                 page.style.setProperty("transformOrigin", "0 0");
14                 page.style.setProperty("transform", "scale("+ _scale + ")");
15                 //兼容ios8
16                 page.style.setProperty("-webkit-transform-origin", "0 0");
17                 page.style.setProperty("-webkit-transfrom", "scale("+ _scale + ")");
18                 document.body.style.setProperty('visibility', 'visible')
19             }, 100);
20 
21         }
22         screenMatch();
23         window.onresize = screenMatch;

上述代碼中id爲page的是整個頁面元素開始的跟節點，body下的第一個元素。這裏body/html要設置min-height:100%;height:100%;

其實咱們在小程序中也能夠使用px單位，可是小程序中使用transform的時候會有一些字體鋸齒的bug，最後換了zoom屬性就行了，同時使用-webkit-zoom作兼容。核心代碼跟h5的差異不大一樣放的是縮放大小