px單位html5響應式方案

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

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

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

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

• transform

• transform-origin

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

　　核心代碼：

　　　　 let screenMatch = () => {
            document.body.style.setProperty('visibility', 'hidden')
            let page = document.getElementById("page"); // id為page的跟節點
            let _scale = (window.screen.width || document.documentElement.clientWidth || document.body.clientWidth || window.outerWidth) /750; //2018年12月10日17:51:21改動 具體下面詳解
            
            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的是整個頁面元素開始的跟節點，body下的第一個元素。這里body/html要設置min-height:100%;height:100%;

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

縮放大小。

注意：樓主今天發現了一個問題，在最新12版iOS自帶的Safari瀏覽器中 window.outerWidth獲取值為0，導致計算出來的縮放為0，導致transform: scale(0)結果就是頁面顯示白屏而且頁面沒報錯
為了兼容起見已經將本文修改。謹慎點的同學可以單獨將屏幕寬度提取出來作為一個單獨的變量。如：

let deviceWidth = window.screen.width || document.documentElement.clientWidth || document.body.clientWidth || window.outerWidth
let _scale = deviceWidth/750;

 

以上代碼親測有效歡迎大家指點意見。不勝感激！