扣丁學(xué)堂html5培訓(xùn)詳解px單位html5響應(yīng)式方案

如今大家對html5已經(jīng)不再陌生，而參加html5培訓(xùn)學(xué)習(xí)html5開發(fā)的人也在不斷的增加，本篇文章小編和大家分享一下px單位html5響應(yīng)式方案的相關(guān)資料，下面我們一塊來看一下吧。

移動端h5響應(yīng)式方案最近這幾年用得最多的最多的就是rem方案了，這個需要計(jì)算根元素的font-size來實(shí)現(xiàn)響應(yīng)式。但這種方案也有一個缺點(diǎn)，那就是font-size不為整數(shù)的時候一些字體使用rem單位會導(dǎo)致字體顯示的大小有問題，對視覺還原要求比較高的項(xiàng)目來說這還是令前端開發(fā)挺頭疼的一件事的。

解決前端響應(yīng)式無非就是在不同的設(shè)備下可以正常展示，這里介紹一種不需要rem方式的響應(yīng)式方案。直接使用px，這里說的是基于750px的設(shè)計(jì)稿。設(shè)計(jì)稿中你量出來是多少px，樣式中直接寫多少px。這樣是不是很快捷，也不需要rem換算。

transform

transform-origin

這里其實(shí)就是用到了transform的scale縮放頁面大小來實(shí)現(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é)點(diǎn)，body下的第一個元素。這里body/html要設(shè)置min-height:100%;height:100%。其實(shí)我們在小程序中也可以使用px單位，但是小程序中使用transform的時候會有一些字體鋸齒的bug，最后換了zoom屬性就好了，同時使用-webkit-zoom做兼容。核心代碼跟h5的差別不大同樣放的是縮放大小。

以上就是扣丁學(xué)堂html5在線學(xué)習(xí)小編為大家做的簡單分享，希望對小伙伴們有所幫助。想要了解更多內(nèi)容的小伙伴可以登錄扣丁學(xué)堂官網(wǎng)咨詢，扣丁學(xué)堂是專業(yè)的html5培訓(xùn)機(jī)構(gòu)，不僅有專業(yè)的老師和與時俱進(jìn)的課程體系，還有大量的html5視頻教程供學(xué)員觀看學(xué)習(xí)哦?？鄱W(xué)堂H5技術(shù)交流群：692172929。微信號：codingbb