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

資訊專欄INFORMATION COLUMN

移動端適配

aristark / 3319人閱讀

摘要：前言這周工作碰到了移動端的問題。這些其實就是比較常見的移動端適配問題。現(xiàn)階段比較主流的適配方案有二種。淘寶有一個名叫的庫，而這個庫就是用來解決頁面終端適配的。

前言：這周工作碰到了移動端1px的問題。以前一直寫樣式也沒有特別注意著一點。還有就是rem的原理。這些其實就是比較常見的移動端適配問題。現(xiàn)階段比較主流的適配方案有二種。一種是flexible + rem,另一種是vw

下面我們來看一下具體情況

1、基本概念

在了解具體方案原理前，我們先來看一下一些基本概念：

1.1、物理像素(physical pixel)

物理像素又被稱為設(shè)備像素，他是顯示設(shè)備中一個最微小的物理部件。每個像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度。

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

設(shè)備獨立像素也稱為密度無關(guān)像素，可以認(rèn)為是計算機(jī)坐標(biāo)系統(tǒng)中的一個點，這個點代表一個可以由程序使用的虛擬像素(比如說CSS像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。（老早在沒有 retina 屏之前，設(shè)備獨立像素與物理像素是相等的）

1.3、CSS像素

CSS像素是一個抽像的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內(nèi)容。一般情況之下，CSS像素稱為與設(shè)備無關(guān)的像素(device-independent pixel)，簡稱DIPs。

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

設(shè)備像素比簡稱為dpr，其定義了物理像素和設(shè)備獨立像素的對應(yīng)關(guān)系。它的值可以按下面的公式計算得到：

設(shè)備像素比 ＝ 物理像素 / 設(shè)備獨立像素

在JavaScript中，可以通過window.devicePixelRatio獲取到當(dāng)前設(shè)備的dpr。而在CSS中，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進(jìn)行媒體查詢，對不同dpr的設(shè)備，做一些樣式適配(這里只針對webkit內(nèi)核的瀏覽器和webview)
因此在iphone 6、7、8 的 dpr 為 2的設(shè)備中，一個設(shè)備獨立像素便為 4 個物理像素，因此在 css 上設(shè)置的 1px 在其屏幕上占據(jù)的是 2個物理像素，0.5px 對應(yīng)的才是其所能展示的最小單位。

1.5、rem

簡單的理解，rem就是相對于根元素的font-size來做計算。而我們的方案中使用rem單位，是能輕易的根據(jù)的ont-size計算出元素的盒模型大小。而這個特色對我們來說是特別的有益處。

2、flexible實現(xiàn)方案

了解了前面一些相關(guān)概念之后，接下來我們來看實際解決方案。淘寶有一個名叫l(wèi)ib-flexible的庫，而這個庫就是用來解決H5頁面終端適配的。
我們把屏幕分成10等分，那么

物理像素為 750 = 375 * 2，那么 10rem = 750px，1rem = 75px;

物理像素為 1125 = 375 * 3，那么 10rem = 1125px，1rem = 112.5px ;

物理像素為 1242 = 414 * 3, 那么 10rem = 1242px，1rem = 124.2px;

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + "px";
        flexible.rem = win.rem = rem;
    }
2.1、1px的物理像素的解決方案

由此我們得到一個1px像素的解決方案。viewport 的 initial-scale 具有縮放頁面的效果。對于 dpr=2 的屏幕，1px壓縮一半便可與1px的設(shè)備像素比匹配，這就可以通過將縮放比 initial-scale 設(shè)置為 0.5=1/2 而實現(xiàn)。以此類推 dpr=3的屏幕可以將 initial-scale設(shè)置為 0.33=1/3 來實現(xiàn)。

if (!metaEl) {
        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);
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }
3、視口單位適配方案

將視口寬度 window.innerWidth 和視口高度 window.innerHeight 等分為 100 份，且將這里的視口理解成 idealviewport 更為貼切，并不會隨著 viewport 的不同設(shè)置而改變。

1、vw : 1vw 為視口寬度的 1%
2、vh : 1vh 為視口高度的 1%
3、vmin : vw 和 vh 中的較小值
4、vmax : 選取 vw 和 vh 中的較大值

如果設(shè)計稿為 750px，那么 1vw = 7.5px，100vw = 750px。其實設(shè)計稿按照設(shè)么都沒多大關(guān)系，最終轉(zhuǎn)化過來的都是相對單位，上面講的 rem 也是對它的模擬。

跟之前一樣的痛點，我們?nèi)匀恍枰ㄙM大量不必要的計算時間去把標(biāo)注圖中的px轉(zhuǎn)換為vw，有沒有類似于postcss-px2rem的工具呢？很榮幸能再次站在巨人的肩膀上，已經(jīng)有大神寫了了類似的PostCss插件 postcss-px-to-viewport

參看資料
https://www.w3cplus.com/mobil...

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

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

相關(guān)文章

  • 移動端布局與適配

    摘要：實戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配，不同的公司不同的團(tuán)隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格，實際上是你將一個元素聲明為一個網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動端頁面適配—...

    Clect 評論0 收藏0

  • 移動端適配方案

    摘要：業(yè)務(wù)環(huán)境是決定整體項目的適配方案的核心因素。而淘寶的主站和類似，分為移動端頁面和端頁面，端頁面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時候?qū)⒆⒁饬性谥虚g區(qū)域。 移動端適配方案 移動端適配方案是一個老生常談的話題，但是對于不同的項目、不同的業(yè)務(wù)場景可能會需要不同的適配方案來進(jìn)行移動端適配，向下兼容的baseline也需要提前訂好。 整體寬高 其實移動端適配就和下面的玩具一樣，...

    feng409 評論0 收藏0

  • rem, vw, 還是...? 各憑本事的移動端適配方案

    摘要：另一種就是不縮放，對等問題單獨引入處理方案。彩蛋部分相信大多數(shù)同學(xué)也是有想法在實際開發(fā)中把融入到現(xiàn)有的移動端適配方案中的。 前言 2018年最后的法定假期都已經(jīng)結(jié)束了，我相信大部分正在進(jìn)行或曾經(jīng)進(jìn)行過移動端頁面開發(fā)的同學(xué)都或多或少的了解過使用rem進(jìn)行移動端頁面適配的方案以及使用vw的方案，(沒了解過的同學(xué)可以參見大漠老師的這兩篇文章 使用Flexible實現(xiàn)手淘H5頁面的終端適配和再...

    wangbinke 評論0 收藏0

  • rem, vw, 還是...? 各憑本事的移動端適配方案

    摘要：另一種就是不縮放，對等問題單獨引入處理方案。彩蛋部分相信大多數(shù)同學(xué)也是有想法在實際開發(fā)中把融入到現(xiàn)有的移動端適配方案中的。 前言 2018年最后的法定假期都已經(jīng)結(jié)束了，我相信大部分正在進(jìn)行或曾經(jīng)進(jìn)行過移動端頁面開發(fā)的同學(xué)都或多或少的了解過使用rem進(jìn)行移動端頁面適配的方案以及使用vw的方案，(沒了解過的同學(xué)可以參見大漠老師的這兩篇文章 使用Flexible實現(xiàn)手淘H5頁面的終端適配和再...

    tianren124 評論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元查看
<