欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解px單位html5響應(yīng)式方案

  發(fā)布時間：2018-03-08 15:32:32   作者：leung_blog   我要評論
這篇文章主要介紹了詳解px單位html5響應(yīng)式方案的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

移動端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換算。

  1. transform
  2. 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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解HTML5中的picture元素響應(yīng)式處理圖片

    這篇文章主要介紹了詳解HTML5中的picture元素響應(yīng)式處理圖片，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-03

  • HTML5響應(yīng)式（自適應(yīng)）網(wǎng)頁設(shè)計的實現(xiàn)

    本篇文章主要介紹了HTML5響應(yīng)式（自適應(yīng)）網(wǎng)頁設(shè)計的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-17

  • 推薦10個HTML5響應(yīng)式框架

    這篇文章主要為大家推薦10個HTML5響應(yīng)式框架，HTML5框架可以快速構(gòu)建響應(yīng)式網(wǎng)站，它們幫助程序員減少編碼工作，減少冗余的代碼，想要了解的朋友可以參考一下
    2016-02-25

  • 分享29個基于Bootstrap的HTML5響應(yīng)式網(wǎng)頁設(shè)計模板

    如今基于Bootstrap框架的免費HTML5網(wǎng)站已經(jīng)開始成為行業(yè)趨勢。研究人員已經(jīng)證實，Bootstrap是引領(lǐng)設(shè)計和開發(fā)行業(yè)趨勢效果最為顯著的，本文給大家分享29個基于Bootstrap的HT
    2015-11-19

  • 淺談html5 響應(yīng)式布局

    本文從響應(yīng)式布局的概念，響應(yīng)式布局的優(yōu)缺點以及設(shè)計理念，還有具體的實現(xiàn)代碼都做了詳細(xì)說明，是篇不可多得的文章，這里推薦給小伙伴
    2014-12-24

最新評論