国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動端頁面開發(fā)適配 rem布局原理

svtter / 2186人閱讀

摘要:移動端頁面開發(fā)適配布局原理什么是適配,為什么要適配我們拿到的設(shè)計圖一般是以,,分辨率為基準(zhǔn)設(shè)計的,而現(xiàn)在的手機(jī)終端各式各樣,分辨率不同,邏輯像素不同,視口不同,所以為了讓我們的頁面在每個設(shè)備上都可以良好的展示,那么就需要為這些設(shè)備做統(tǒng)一的處

移動端頁面開發(fā)適配 rem布局原理 什么是適配,為什么要適配

我們拿到的設(shè)計圖一般是以640,750,1080分辨率為基準(zhǔn)設(shè)計的,而現(xiàn)在的手機(jī)終端各式各樣,分辨率不同,邏輯像素不同 ,視口不同,所以為了讓我們的頁面在每個設(shè)備上都可以良好的展示,那么就需要為這些設(shè)備做統(tǒng)一的處理,這個過程就稱為移動端適配。

需要知道的一些概念:

物理像素(physical pixel)

一個物理像素是顯示器(手機(jī)屏幕)上最小的物理顯示單元,可以理解為我們平時說的分辨率。

設(shè)備獨立像素(density-independent pixel)

設(shè)備獨立像素(也叫密度無關(guān)像素),可以認(rèn)為是計算機(jī)坐標(biāo)系統(tǒng)中得一個點,這個點代表一個可以由程序使用的虛擬像素(比如: css像素),然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素,在這里可以理解為我們說的視覺視口的大小;

所以說,物理像素和設(shè)備獨立像素之間存在著一定的對應(yīng)關(guān)系,這就是接下來要說的設(shè)備像素比。

設(shè)備像素比(device pixel ratio)

設(shè)備像素比(簡稱dpr)定義了物理像素和設(shè)備獨立像素的對應(yīng)關(guān)系,它的值可以按如下的公式的得到:
設(shè)備像素比 = 物理像素 / 設(shè)備獨立像素 // 在某一方向上,x方向或者y方向

設(shè)備像素比也是設(shè)備生產(chǎn)的時候設(shè)置好的,在javascript中,可以通window.devicePixelRatio獲取到當(dāng)前設(shè)備的dpr。

視口(viewport)

pc端視口指瀏覽器窗口內(nèi)的內(nèi)容區(qū)域,不包含工具條,滾動條.

移動瀏覽器中視口分為幾種情況:

中content所設(shè)置的視口,稱為布局視口,最大值由瀏覽器廠商規(guī)定 ,可以document.documentElement.clientWidth獲取其寬度.

而我們看到的瀏覽器的窗口,網(wǎng)頁區(qū)域的大小,稱為視覺視口,用css像素表示(設(shè)備邏輯像素)

rem

rem是css3 的一個長度單位 ,相對文檔跟元素 html;比如設(shè)置html font-size=100px;那么1rem=100px;之后的所有元素都可以用這個基準(zhǔn)值來設(shè)置大?。?/p> 常用的方案:

固定高度,寬度自適應(yīng)(百分比,em)

使用 rem布局

下面總結(jié)了網(wǎng)易 淘寶首頁使用rem的方案 網(wǎng)易的做法:

1) 將布局適口設(shè)置為視覺視口,不進(jìn)行縮放,即理想視口。


這里if(deviceWidth > 640) deviceWidth = 640; 是因為當(dāng)deviceWidth大于640時物理分辨率已經(jīng)大于1280(取決于dpr),應(yīng)該去訪問pc的網(wǎng)站;

淘寶的做法:

原理

1) 通過dpr設(shè)置縮放比,實現(xiàn)布局視口大小,

var scale = 1 / devicePixelRatio;  
 document.querySelector("meta[name="viewport"]").setAttribute("content","initial-scale="+ scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");

2) 動態(tài)計算html的font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px’;

這里的意思是,clientWidth / 10 得到是布局視口下的rem基準(zhǔn)值(以iphone6為例 1rem=75px),那么設(shè)計稿正好也是 750,所以對應(yīng)的關(guān)系 clientWidth / 10==設(shè)計稿的尺寸/x, 那么x=設(shè)計稿的尺寸/rem基準(zhǔn)值。
如果是iphone6 plus rem基準(zhǔn)值等于clientWidth / 10 等于124.2,那么x=750/124.2。

關(guān)于具體的實現(xiàn) 淘寶提供了一個開源的方案lib-flexible:https://github.com/amfe/lib-f...;

具體邏輯 :

1)判斷head中是否設(shè)置了viewport,如果有設(shè)置,按照已有viewport 設(shè)置縮放比;

if (metaEl) {
        console.warn("將根據(jù)已有的meta標(biāo)簽來設(shè)置縮放比例");
        var match = metaEl.getAttribute("content").match(/initial-scale=([d.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    }

2)如果沒有設(shè)置meta viewport,判斷是否設(shè)置dpr,如果有,通過dpr計算縮放scale。

        var content = flexibleEl.getAttribute("content");
        if (content) {
            var initialDpr = content.match(/initial-dpr=([d.]+)/);
            var maximumDpr = content.match(/maximum-dpr=([d.]+)/);//maximum 設(shè)置最大值,與initial的值比較,取最小值;
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
        }

3)如果 dpr &scale都沒有設(shè)置,那么就通過設(shè)備的dpr設(shè)置起縮放 scale,

if (!dpr && !scale) {//meta[name="viewport"]&&meta[name="flexible"]都不存在。
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下,對于2和3的屏,用2倍的方案,其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他設(shè)備下,仍舊使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}

4)得到scale之后 ,如果meta 的viewport不存在,那么就創(chuàng)建一meta[name=“viewport”],將scale配置進(jìn)去。

    metaEl = doc.createElement("meta");
    metaEl.setAttribute("name", "viewport");
    metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");

    if (docEl.firstElementChild) {

        docEl.firstElementChild.appendChild(metaEl);
         
    } 

5)動態(tài)改寫html的font-size

    var width = docEl.getBoundingClientRect().width;//獲取html的寬度
    if (width / dpr > 540) {//判斷屏幕邏輯像素大于540時,取540
        width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + "px";
    flexible.rem = win.rem = rem;

總結(jié):

使用rem布局,實質(zhì)都是通過動態(tài)改寫html的font-size基準(zhǔn)值,來實現(xiàn)不同設(shè)備下的良好統(tǒng)一適配;

網(wǎng)易與淘寶不同 的地方是 ,網(wǎng)易將布局視口設(shè)置成了 視覺視口,淘寶將布局視口設(shè)置成了物理像素大小,通過 scale縮放嵌入了 視覺視口中;

容器元素的字體大小都不使用rem,需要額外的media查詢;

參考文章鏈接:
http://www.cnblogs.com/lyzg/p...;
http://mobile.51cto.com/web-4...

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/115325.html

相關(guān)文章

  • 移動頁面開發(fā)適配 rem布局原理

    摘要:移動端頁面開發(fā)適配布局原理什么是適配,為什么要適配我們拿到的設(shè)計圖一般是以,,分辨率為基準(zhǔn)設(shè)計的,而現(xiàn)在的手機(jī)終端各式各樣,分辨率不同,邏輯像素不同,視口不同,所以為了讓我們的頁面在每個設(shè)備上都可以良好的展示,那么就需要為這些設(shè)備做統(tǒng)一的處 移動端頁面開發(fā)適配 rem布局原理 什么是適配,為什么要適配 我們拿到的設(shè)計圖一般是以640,750,1080分辨率為基準(zhǔn)設(shè)計的,而現(xiàn)在的手機(jī)終端...

    JasinYip 評論0 收藏0
  • 我對移動適配的了解

    摘要:隨著移動端的發(fā)展,在手機(jī)上看電腦端的頁面已成為非常普及現(xiàn)象。方案一固定高度,使其寬度自適應(yīng)這也是我接觸移動端適配第一次使用的方案。 不知不覺做前端已經(jīng)兩年了,從PC端,移動端,微信小程序一路走來到今天剛剛開放注冊的快應(yīng)用(手機(jī)廠商對抗小程序的新技能,所以在注冊時用的是qq郵箱的話要去垃圾箱里才能找到注冊郵件),對于前端圈日新月異的磅礴發(fā)展對于大前端發(fā)展是喜聞樂見的,這次的快應(yīng)用的手機(jī)廠...

    import. 評論0 收藏0
  • 我對移動適配的了解

    摘要:隨著移動端的發(fā)展,在手機(jī)上看電腦端的頁面已成為非常普及現(xiàn)象。方案一固定高度,使其寬度自適應(yīng)這也是我接觸移動端適配第一次使用的方案。 不知不覺做前端已經(jīng)兩年了,從PC端,移動端,微信小程序一路走來到今天剛剛開放注冊的快應(yīng)用(手機(jī)廠商對抗小程序的新技能,所以在注冊時用的是qq郵箱的話要去垃圾箱里才能找到注冊郵件),對于前端圈日新月異的磅礴發(fā)展對于大前端發(fā)展是喜聞樂見的,這次的快應(yīng)用的手機(jī)廠...

    snowLu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<