使用Flexible實現手淘H5頁面的終端適配

曾幾什麼時候爲了兼容IE低版本瀏覽器而頭痛，覺得到Mobile時代能夠跟這些麻煩說拜拜。可沒想到到了移動時代，爲了處理各終端的適配而亂了手腳。對於混跡各社區的偶，時常發現你們拿手機淘寶的H5頁面作討論——手淘的H5頁面是如何實現多終端的適配？css

那麼趁此Amfe阿里無線前端團隊雙11技術連載之際，用一個實戰案例來告訴你們，手淘的H5頁面是如何實現多終端適配的，但願這篇文章對你們在Mobile的世界中能過得更輕鬆。html

目標

拿一個雙11的Mobile頁面來作案例，好比你實現一個相似下圖的一個H5頁面：前端

目標很清晰，就是作一個這樣的H5頁面。react

DEMO

請用手機掃下面的二維碼android

痛點

雖然H5的頁面與PC的Web頁面相比簡單了很多，但讓咱們頭痛的事情是要想盡辦法讓頁面能適配衆多不一樣的終端設備。看看下圖你就會知道，這是多麼痛苦的一件事情：ios

點擊這裏查看更多終端設備的參數。css3

再來看看手淘H5要適配的終端設備數據：git

看到這些數據，是否死的心都有了，或者說爲此捏了一把汗出來。github

手淘團隊適配協做模式

早期移動端開發，對於終端設備適配問題只屬於Android系列，只不過不少設計師經常忽略Android適配問題，只出一套iOS平臺設計稿。但隨着iPhone6，iPhone6+的出現，今後終端適配問題再也不是Android系列了，也從這個時候讓移動端適配全面進入到「雜屏」時代。web

上圖來自於paintcodeapp.com

爲了應對這多麼的終端設備，設計師和前端開發之間又應該採用什麼協做模式？或許你們對此也很是感興趣。

而整個手淘設計師和前端開發的適配協做基本思路是：

選擇一種尺寸做爲設計和開發基準
定義一套適配規則，自動適配剩下的兩種尺寸(其實不只這兩種，你懂的)
特殊適配效果給出設計效果

仍是上一張圖吧，由於一圖賽過千言萬語：

在此也不作更多的闡述。在手淘的設計師和前端開發協做過程當中：手淘設計師常選擇iPhone6做爲基準設計尺寸，交付給前端的設計尺寸是按750px * 1334px爲準(高度會隨着內容多少而改變)。前端開發人員經過一套適配規則自動適配到其餘的尺寸。

根據上面所說的，設計師給咱們的設計圖是一個750px * 1600px的頁面：

前端開發完成終端適配方案

拿到設計師給的設計圖以後，剩下的事情是前端開發人員的事了。而手淘通過多年的摸索和實戰，總結了一套移動端適配的方案——flexible方案。

這種方案具體在實際開發中如何使用，暫時先賣個關子，在繼續詳細的開發實施以前，咱們要先了解一些基本概念。

一些基本概念

在進行具體實戰以前，首先得了解下面這些基本概念(術語)：

視窗 viewport

簡單的理解，viewport是嚴格等於瀏覽器的窗口。在桌面瀏覽器中，viewport就是瀏覽器窗口的寬度高度。但在移動端設備上就有點複雜。

移動端的viewport太窄，爲了能更好爲CSS佈局服務，因此提供了兩個viewport:虛擬的viewportvisualviewport和佈局的viewportlayoutviewport。

George Cummins在Stack Overflow上對這兩個基本概念作了詳細的解釋。

而事實上viewport是一個很複雜的知識點，上面的簡單描述可能沒法幫助你更好的理解viewport，而你又想對此作更深的瞭解，能夠閱讀PPK寫的相關教程。

物理像素(physical pixel)

物理像素又被稱爲設備像素，他是顯示設備中一個最微小的物理部件。每一個像素能夠根據操做系統設置本身的顏色和亮度。正是這些設備像素的微小距離欺騙了咱們肉眼看到的圖像效果。

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

設備獨立像素也稱爲密度無關像素，能夠認爲是計算機座標系統中的一個點，這個點表明一個能夠由程序使用的虛擬像素(好比說CSS像素)，而後由相關係統轉換爲物理像素。

CSS像素

CSS像素是一個抽像的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內容。通常狀況之下，CSS像素稱爲與設備無關的像素(device-independent pixel)，簡稱DIPs。

屏幕密度

屏幕密度是指一個設備表面上存在的像素數量，它一般以每英寸有多少像素來計算(PPI)。

設備像素比(device pixel ratio)

設備像素比簡稱爲dpr，其定義了物理像素和設備獨立像素的對應關係。它的值能夠按下面的公式計算獲得：

設備像素比 ＝ 物理像素 / 設備獨立像素

在JavaScript中，能夠經過window.devicePixelRatio獲取到當前設備的dpr。而在CSS中，能夠經過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不一樣dpr的設備，作一些樣式適配(這裏只針對webkit內核的瀏覽器和webview)。

dip或dp,（device independent pixels，設備獨立像素）與屏幕密度有關。dip能夠用來輔助區分視網膜設備仍是非視網膜設備。

縮合上述的幾個概念，用一張圖來解釋：

衆所周知，iPhone6的設備寬度和高度爲375pt * 667pt,能夠理解爲設備的獨立像素；而其dpr爲2，根據上面公式，咱們能夠很輕鬆得知其物理像素爲750pt * 1334pt。

以下圖所示，某元素的CSS樣式：

width: 2px;
height: 2px；

在不一樣的屏幕上，CSS像素所呈現的物理尺寸是一致的，而不一樣的是CSS像素所對應的物理像素具數是不一致的。在普通屏幕下1個CSS像素對應1個物理像素，而在Retina屏幕下，1個CSS像素對應的倒是4個物理像素。

有關於更多的介紹能夠點擊這裏詳細瞭解。

看到這裏，你能感受到，在移動端時代屏幕適配除了Layout以外，還要考慮到圖片的適配，由於其直接影響到頁面顯示質量，對於如何實現圖片適配，再此不作過多詳細闡述。這裏盜用了@南宮瑞揚根據mir.aculo.us翻譯的一張信息圖：

meta標籤

<meta>標籤有不少種，而這裏要着重說的是viewport的meta標籤，其主要用來告訴瀏覽器如何規範的渲染Web頁面，而你則須要告訴它視窗有多大。在開發移動端頁面，咱們須要設置meta標籤以下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

代碼以顯示網頁的屏幕寬度定義了視窗寬度。網頁的比例和最大比例被設置爲100%。

留個懸念，由於後面的解決方案中須要重度依賴meta標籤。

CSS單位rem

在W3C規範中是這樣描述rem的:

font size of the root element.

簡單的理解，rem就是相對於根元素<html>的font-size來作計算。而咱們的方案中使用rem單位，是能輕易的根據<html>的font-size計算出元素的盒模型大小。而這個特點對咱們來講是特別的有益處。

前端實現方案

瞭解了前面一些相關概念以後，接下來咱們來看實際解決方案。在整個手淘團隊，咱們有一個名叫lib-flexible的庫，而這個庫就是用來解決H5頁面終端適配的。

lib-flexible是什麼？

lib-flexible是一個製做H5適配的開源庫，能夠點擊這裏下載相關文件，獲取須要的JavaScript和CSS文件。

固然你能夠直接使用阿里CDN：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>

將代碼中的{{version}}換成對應的版本號0.3.4。

使用方法

lib-flexible庫的使用方法很是的簡單，只須要在Web頁面的<head></head>中添加對應的flexible_css.js,flexible.js文件：

第一種方法是將文件下載到你的項目中，而後經過相對路徑添加:

<script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js"></script>

或者直接加載阿里CDN的文件：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

另外強烈建議對JS作內聯處理，在全部資源加載以前執行這個JS。執行這個JS後，會在<html>元素上增長一個data-dpr屬性，以及一個font-size樣式。JS會根據不一樣的設備添加不一樣的data-dpr值，好比說2或者3，同時會給html加上對應的font-size的值，好比說75px。

如此一來，頁面中的元素，均可以經過rem單位來設置。他們會根據html元素的font-size值作相應的計算，從而實現屏幕的適配效果。

除此以外，在引入lib-flexible須要執行的JS以前，能夠手動設置meta來控制dpr值，如：

<meta name="flexible" content="initial-dpr=2" />

其中initial-dpr會把dpr強制設置爲給定的值。若是手動設置了dpr以後，無論設備是多少的dpr，都會強制認爲其dpr是你設置的值。在此不建議手動強制設置dpr，由於在Flexible中，只對iOS設備進行dpr的判斷，對於Android系列，始終認爲其dpr爲1。

if (!dpr && !scale) {
    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 {
        // 其餘設備下，仍舊使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}

flexible的實質

flexible實際上就是能過JS來動態改寫meta標籤，代碼相似這樣：

var metaEl = doc.createElement('meta');
var scale = isRetina ? 0.5:1;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
    document.documentElement.firstElementChild.appendChild(metaEl);
} else {
    var wrap = doc.createElement('div');
    wrap.appendChild(metaEl);
    documen.write(wrap.innerHTML);
}

事實上他作了這幾樣事情：

動態改寫<meta>標籤
給<html>元素添加data-dpr屬性，而且動態改寫data-dpr的值
給<html>元素添加font-size屬性，而且動態改寫font-size的值

案例實戰

瞭解Flexible相關的知識以後，我們回到文章開頭。咱們的目標是製做一個適配各終端的H5頁面。別的很少說，動手才能豐衣足食。

建立HTML模板

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="telephone=no,email=no" name="format-detection">
        <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
        <link rel="apple-touch-icon" href="favicon.png">
        <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
        <title>再來一波</title>
    </head>
    <body>
        <!-- 頁面結構寫在這裏 -->
    </body>
</html>

正如前面所介紹的同樣，首先加載了Flexible所需的配置：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

這個時候能夠根據設計的圖需求，在HTML文檔的<body></body>中添加對應的HTML結構，好比：

<div class="item-section" data-repeat="sections">
    <div class="item-section_header">
        <h2><img src="{brannerImag}" alt=""></h2>
    </div>
    <ul>
        <li data-repeat="items" class="flag" role="link" href="{itemLink}">
            <a class="figure flag-item" href="{itemLink}">
                <img src="{imgSrc}" alt="">
            </a>
            <div class="figcaption flag-item">
                <div class="flag-title"><a href="{itemLink}" title="">{poductName}</a></div>
                <div class="flag-price"><span>雙11價</span><strong>¥{price}</strong><small>({preferential})</small></div>
                <div class="flag-type">{activityType}</div>
                <a class="flag-btn" href="{shopLink}">{activeName}</a>
            </div>
        </li>
    </ul>
</div>

這僅是一個示例文檔，你們能夠根據本身風格寫模板。

爲了能更好的測試頁面，給其配置一點假數據：

//define data
var pageData = {
    sections:[{
        "brannerImag":"http://xxx.cdn.com/B1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg",
        items:[{
            "itemLink": "##",
            "imgSrc": "https://placeimg.com/350/350/people/grayscale",
            "poductName":"Carter's1年式灰色長袖連體衣包腳爬服全棉鯨魚男嬰兒童裝115G093",
            "price": "299.06",
            "preferential": "滿400減100",
            "activityType": "1小時內熱賣5885件",
            "shopLink":"##",
            "activeName": "立刻搶！"
        }
            ....
        }]
    }]
}

接下來的工做就是美化工做了。在寫具體樣式以前，有幾個點須要先了解一下。

把視覺稿中的`px`轉換成`rem`

讀到這裏，你們應該都知道，咱們接下來要作的事情，就是如何把視覺稿中的px轉換成rem。在此花點時間解釋一下。

首先，目前平常工做當中，視覺設計師給到前端開發人員手中的視覺稿尺寸通常是基於640px、750px以及1125px寬度爲準。甚至爲何？你們應該懂的（考慮Retina屏）。

正如文章開頭顯示的示例設計稿，他就是一張以750px爲基礎設計的。那麼問題來了，咱們如何將設計稿中的各元素的px轉換成rem。

我廠的視覺設計師想得仍是很周到的，會幫你把相關的信息在視覺稿上標註出來。

目前Flexible會將視覺稿分紅**100份**（主要爲了之後能更好的兼容vh和vw），而每一份被稱爲一個單位a。同時1rem單位被認定爲10a。針對咱們這份視覺稿能夠計算出：

1a   = 7.5px
1rem = 75px

那麼咱們這個示例的稿子就分紅了10a，也就是整個寬度爲10rem，<html>對應的font-size爲75px：

這樣一來，對於視覺稿上的元素尺寸換算，只須要原始的px值除以rem基準值便可。例如此例視覺稿中的圖片，其尺寸是176px * 176px,轉換成爲2.346667rem * 2.346667rem。

如何快速計算

在實際生產當中，若是每一次計算px轉換rem，或許會以爲很是麻煩，或許直接影響你們平時的開發效率。爲了能讓你們更快進行轉換，咱們團隊內的同窗各施所長，爲px轉換rem寫了各式各樣的小工具。

CSSREM

CSSREM是一個CSS的px值轉rem值的Sublime Text3自動完成插件。這個插件是由@正霖編寫。先來看看插件的效果：

有關於CSSREM如何安裝、配置教程能夠點擊這裏查閱。

CSS處理器

除了使用編輯器的插件以外，還可使用CSS的處理器來幫助你們處理。好比說Sass、LESS以及PostCSS這樣的處理器。咱們簡單來看兩個示例。

Sass

使用Sass的同窗，可使用Sass的函數、混合宏這些功能來實現：

@function px2em($px, $base-font-size: 16px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2em($px + 0px); // That may fail.
    } @else if (unit($px) == em) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1em;
}

除了使用Sass函數外，還可使用Sass的混合宏：

@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
    //Conver the baseline into rems
    $baseline-rem: $baseline-px / 1rem * 1;
    //Print the first line in pixel values
    @if $support-for-ie {
        #{$property}: $px-values;
    }
    //if there is only one (numeric) value, return the property/value line for it.
    @if type-of($px-values) == "number"{
        #{$property}: $px-values / $baseline-rem;
    }
    @else {
        //Create an empty list that we can dump values into
        $rem-values:();
        @each $value in $px-values{
            // If the value is zero or not a number, return it
            @if $value == 0 or type-of($value) != "number"{
                $rem-values: append($rem-values, $value / $baseline-rem);
            }
        }
        // Return the property and its list of converted values
        #{$property}: $rem-values;
    }
}

有關於更多的介紹，能夠點擊這裏進行了解。

PostCSS(px2rem)

除了Sass這樣的CSS處理器這外，咱們團隊的@頌奇同窗還開發了一款npm的工具px2rem。安裝好px2rem以後，能夠在項目中直接使用。也可使用PostCSS。使用PostCSS插件postcss-px2rem：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var px2rem = require('postcss-px2rem');

gulp.task('default', function() {
    var processors = [px2rem({remUnit: 75})];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

除了在Gulp中配置外，還可使用其餘的配置方式，詳細的介紹能夠點擊這裏進行了解。

配置完成以後，在實際使用時，你只要像下面這樣使用：

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

px2rem處理以後將會變成：

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

在整個開發中有了這些工具以後，徹底不用擔憂px值轉rem值影響開發效率。

文本字號不建議使用`rem`

前面你們都見證瞭如何使用rem來完成H5適配。那麼文本又將如何處理適配。是否是也經過rem來作自動適配。

顯然，咱們在iPhone3G和iPhone4的Retina屏下面，但願看到的文本字號是相同的。也就是說，咱們不但願文本在Retina屏幕下變小，另外，咱們但願在大屏手機上看到更多文本，以及，如今絕大多數的字體文件都自帶一些點陣尺寸，一般是16px和24px，因此咱們不但願出現13px和15px這樣的奇葩尺寸。

如此一來，就決定了在製做H5的頁面中，rem並不適合用到段落文本上。因此在Flexible整個適配方案中，考慮文本仍是使用px做爲單位。只不過使用[data-dpr]屬性來區分不一樣dpr下的文本字號大小。

div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默認寫上dpr爲1的fontSize
}
[data-dpr="2"] div {
    font-size: 24px;
}
[data-dpr="3"] div {
    font-size: 36px;
}

爲了能更好的利於開發，在實際開發中，咱們能夠定製一個font-dpr()這樣的Sass混合宏：

@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

有了這樣的混合宏以後，在開發中能夠直接這樣使用：

@include font-dpr(16px);

固然這只是針對於描述性的文本，好比說段落文本。但有的時候文本的字號也須要分場景的，好比在項目中有一個slogan,業務方但願這個slogan能根據不一樣的終端適配。針對這樣的場景，徹底可使用rem給slogan作計量單位。

CSS

原本想把這個頁面的用到的CSS(或SCSS)貼出來，但考慮篇幅過長，並且這麼簡單的頁面，我想你們也能垂手可得搞定。因此就省略了。權當是給你們留的一個做業吧，感興趣的能夠試試Flexible可否幫你快速完成H5頁面終端適配。

效果

最後來看看真機上顯示的效果吧。我截了兩種設備下的效果：

iPhone4

iPhone6+

總結

其實H5適配的方案有不少種，網上有關於這方面的教程也很是的多。無論哪一種方法，都有其本身的優點和劣勢。而本文主要介紹的是如何使用Flexible這樣的一庫來完成H5頁面的終端適配。爲何推薦使用Flexible庫來作H5頁面的終端設備適配呢？主要由於這個庫在手淘已經使用了近一年，並且已達到了較爲穩定的狀態。除此以外，你不須要考慮如何對元素進行折算，能夠根據對應的視覺稿，直接切入。

固然，若是您有更好的H5頁面終端適配方案，歡迎在下面的評論中與咱們一塊兒分享。若是您在使用這個庫時，碰到任何問題，均可以在Github給咱們提Issue。咱們團隊會努力解決相關需Issues。

Update

同窗反饋說須要一個在線的DEMO，那麼隨便寫了一個DEMO，但願對你們有所幫助。沒有測試全部設備，可能不一樣的設備有細節上的差別。

DEMO

請用手機掃下面的二維碼

Update【2016年01月13日】

首先，由衷的感謝@完顏(@SMbey0nd) 幫忙踩了這個坑，回想起iOS從7~~8，從8~~9，都踩過只至少一個坑，真的也是醉了。

手淘這邊的flexible方案臨時升級以下：

針對OS 9_3的UA，作臨時處理，強制dpr爲1，即scale也爲1，雖然犧牲了這些版本上的高清方案，可是也只能這麼處理了
這個版本不打算髮布到CDN（也不發不到tnpm），因此你們更新的方式，最好手動複製代碼內聯到html中，具體代碼能夠點擊這裏下載

chesihui commented on 19 Nov 2015

很是實用！

Contributor

hongru commented on 19 Nov 2015

沙發地板，高質量文章點贊

cristicmf commented on 19 Nov 2015

要細細品味~

wssgcg1213 commented on 19 Nov 2015

前排

westke commented on 19 Nov 2015

佔座

cqgsm commented on 19 Nov 2015

好東西啊謝謝無私分享

fsy0718 commented on 19 Nov 2015

佔座

cxyn commented on 19 Nov 2015

感謝分享，很是受用！準備在項目中嘗試運用。

ghost commented on 19 Nov 2015

以前好多疑惑的地方，一次性解決了，大讚！！！

jincdream commented on 19 Nov 2015

我廠的視覺設計師想得仍是很周到的，會幫你把相關的信息在視覺稿上標註出來。

這纔是我想要的設計師。不說了，我去哭會。
Markman 都是自費的。.

最近咱們也作了這個適配方案的研究。~佔位，明天放連接

jincdream commented on 19 Nov 2015

爲何字體不能用rem ?

咱們不但願文本在Retina屏幕下變小，另外，咱們但願在大屏手機上看到更多文本，以及，如今絕大多數的字體文件都自帶一些點陣尺寸，一般是16px和24px，因此咱們不但願出現13px和15px這樣的奇葩尺寸。

換句話說，若是使用rem,那麼字體的單行數量顯示，在不一樣的尺寸和像素比的屏幕上都是同樣的。但真的不能用嗎？未必呀( ⊙ o ⊙ )！！設計稿可能會有這樣的需求：我這一行字必須就是這幾個（其實就是標題）,這時候，你總不能說，噢~介個iphone6 plusd的像素比這麼高，像素這麼多，就讓它多顯示幾個字的標題吧吧吧吧吧...

因此，有時候並非不能用，而是要選擇合適的時候使用合適的單位吧。

如此一來，就決定了在製做H5的頁面中，rem並不適合用到段落文本上。因此在Flexible整個適配方案中，考慮文本仍是使用px做爲單位。只不過使用[data-dpr]屬性來區分不一樣dpr下的文本字號大小

固然這只是針對於描述性的文本，好比說段落文本。但有的時候文本的字號也須要分場景的，好比在項目中有一個slogan,業務方但願這個slogan能根據不一樣的終端適配。針對這樣的場景，徹底可使用rem給slogan作計量單位。

zeyongTsai commented on 20 Nov 2015

乾貨，又有新東西用了。

mootee commented on 20 Nov 2015

Member

terrykingcha commented on 20 Nov 2015

人工點贊

meiyzeng commented on 20 Nov 2015

用這套方案作適配的話有沒有趕上在ios環境下fontsize沒法控制emoji表情（unicode）編碼的問題呢？

GavinHans commented on 20 Nov 2015

好文要頂

yuzhe927 commented on 20 Nov 2015

受教了

shawyon commented on 20 Nov 2015

講得很細，從新學習了Flexible

linjinying commented on 20 Nov 2015

請教一下，若是遇到雪碧圖的icon，改如何適配。background-size對rem的適配好像不好吧

moocss referenced this issue in thoughtbit/it-note on 20 Nov 2015

Open

移動開發資源 #20

floraluo commented on 20 Nov 2015

雖然我如今還沒作移動端，可是對這一方面關注已久了。flexible方案以前看過，這裏一講就更清楚了。另外我再想問一問，關於網易的移動端適配方案和flexible相比，針對項目不一樣的複雜度，這兩個各自的優點劣勢是什麼呢？

tangjinzhou commented on 20 Nov 2015

先贊後看

floraluo commented on 20 Nov 2015

@linjinying雪碧圖的話，那就要作兩個，或者三個，看你要適配那種，dpr=2的雪碧圖也要 X2

hzh1990 commented on 20 Nov 2015

@floraluo 若是你不想作兩個或者三個... 你能夠作一個最大的...

linjinying commented on 20 Nov 2015

@floraluo @hzh1990 就假設拿到是最大的，那最終要經過什麼樣的策略達到適配效果。目前我是經過background-size+媒體查詢來實現的。感受效果不是很好。

chenerlang666 commented on 20 Nov 2015

佔坑

magele758 commented on 20 Nov 2015

文章既然已經講到了CSS像素和物理像素的區分，其實能夠在這個地方作文章，卻又走上了rem得路子上去，其實思路是同樣的，卻多作了一步。

AlexBai1991 commented on 20 Nov 2015

頂！d=====(￣▽￣*)b

zzbo commented on 20 Nov 2015

nice~

JingwenTian commented on 20 Nov 2015

@mark

c2ye commented on 20 Nov 2015

文章寫的很是贊，娓娓道來，頗有誠意，點贊！

yimity commented on 20 Nov 2015

再配合這篇文章來看，會更不錯哦。
http://div.io/topic/1092

tarymee commented on 20 Nov 2015

贊

lylpixin2121 commented on 20 Nov 2015

nice

LindaWhite commented on 20 Nov 2015

學習了，謝謝

crazyyfrog commented on 20 Nov 2015

mark

kujian commented on 20 Nov 2015

mark

airen referenced this issue in amfe/lib-flexible on 20 Nov 2015

Closed

完整引用舉例裏寫的是什麼看不懂 #15

del1214 commented on 20 Nov 2015

請問這個lib-flexible庫在微信的x5內核裏能用麼？

Contributor

airen commented on 20 Nov 2015

@del1214 理論上只要支持viewport的內核都是能夠用的。不仿嘗試一下，若是有問題，歡迎給咱們提issue

Contributor

airen commented on 20 Nov 2015

@jincdream 並無說在實際中對字號不能使用rem，而是強列建議使用px，在大於48px這樣的字號時，考慮使用rem更適合。

Contributor

airen commented on 20 Nov 2015

@linjinying 您說的問題，我在實際中也碰到過，有時候會略爲頭痛。咱們如今的作法是在實際中不使用icon sprites這種方式，通常對於icon，更建議採用icon font或者使用svg icon，也可使用base64 配合background-size。

linjinying commented on 20 Nov 2015

@airen 然而，實現開發中，難爲有些icon不能用font或svg來實現，曾經想過用rem來設置background-size的值，這種不是很標準的作法，是否可取？

jincdream commented on 20 Nov 2015

@airen 全部要改改標題嘛？~

- ##字號不使用rem + ##文本字體不建議使用rem

qingying referenced this issue on 20 Nov 2015

Open

雙十一敲鐘項目總結 #19

lidianhao123 commented on 21 Nov 2015

使用這種適配方案，如何處理div background-image 圖片是sprite的

ireliale commented on 21 Nov 2015

不知道我這種方法是否可行,把viewport寬度固定爲320(也能夠是其餘尺寸), 而後在不一樣設備上查看該設備的設備獨立像素即:window.screen.width, 這個值與320的比值就是網頁縮放的比值,而後添加相應的meta標籤,如圖所示,這樣行不?

lidianhao123 commented on 21 Nov 2015

@ireliale 我指的是使用flexible 方案，若是使用你圖片中的方案就不屬於flexible方案了，也就不存在我提到的問題。

ireliale commented on 21 Nov 2015

@lidianhao123 sorry, 我沒有表達清楚,個人意思是用我圖片中的那種方式作移動端h5頁面的適配是否可行,@airen

lidianhao123 commented on 21 Nov 2015

@ireliale 目前項目中有用你提到的這種方式。如今通常都把寬度固定成640px了，估計很快要到750px

dengxiaozhen commented on 21 Nov 2015

1rem=75px，感受太難換算，我以爲1rem=40px比較好換算

yinqiao commented on 21 Nov 2015

如今使用640px的設計稿仍是居多

jcpplus commented on 22 Nov 2015

贊！目前使用的就是基於這個框架以內的東西。

yutingzhao1991 referenced this issue in yutingzhao1991/github-blogs-weekly on 22 Nov 2015

Open

文章更新 [ 2015-11-15 - 2015-11-21 ] #11

gdmec07120721 commented on 23 Nov 2015

好貨好貨~

ChristYoung commented on 23 Nov 2015

純乾貨要頂

yeol commented on 23 Nov 2015

贊～

elvinzhu commented on 24 Nov 2015

@airen 請教個問題

若是字體使用px的話，那麼容器的高度使用的是自適應仍是rem？若是是rem的話，那麼這個容器在有些屏幕寬度下稍微有些空曠！若是使用px的或者自適應的話，假如頁面有positioned 的元素的的時候，那這個元素的相對位置在有些屏幕下會錯開，由於那些自適應的容器沒有等比撐開頁面！

不知道你有沒有遇到過上面的問題，還望指點一二，謝謝

dengxiaozhen commented on 24 Nov 2015

@elvinzhu 我通常高度設置px，這樣看起來也不會說在橫屏，高度會變得很是大

dengxiaozhen commented on 24 Nov 2015

@yinqiao 咱們也是640px的設計稿

elvinzhu commented on 24 Nov 2015

@dengxiaozhen Thanks

高度設置px的話，難道你的字體大小不會隨着dpr的增大而增大？

dengxiaozhen commented on 24 Nov 2015

@elvinzhu 字號也是設置px咯

Contributor

airen commented on 24 Nov 2015

@jincdream 謝謝您的建議

Contributor

airen commented on 24 Nov 2015

@elvinzhu 這個應該根據具體狀況來定，若是您以爲你的元素須要顯式的指定高度，建議使用rem作爲單位。從我的經驗來講，通常狀況下不給元素顯式指定高度。

Contributor

airen commented on 24 Nov 2015

@floraluo 能夠考慮直接使用SVG Sprites。

Contributor

airen commented on 24 Nov 2015

@dengxiaozhen px 轉換rem是不須要人工去計算的，文章中也提供了多種轉換的方法。能夠參考一下。另外設置爲75px或64px並非根據好算很差算做爲出發點，而應該根據您的設計圖尺寸作爲出發點。

elvinzhu commented on 24 Nov 2015

@airen

Thanks

問題在於，當有些容器使用自適應高度的時候，頁面上好比fixed的元素的位置（top）不管是rem單位仍是px單位，在不一樣屏幕尺寸下相對位置就會不一致，由於那些自適應高度的元素的高度不是按照屏幕寬度的變化等比變化的

dengxiaozhen commented on 24 Nov 2015

@airen 哦哦謝謝大漠指點。

vvchen commented on 24 Nov 2015

1rem=10px，這樣不是更好換算嗎？直接就心算出來了，都不須要工具
html字體大小按照：clientWidth*(10/750)來設置就行了

lvscar referenced this issue on 24 Nov 2015

Open

兩屆雙十一間手機淘寶基礎業務前端技術的演進 #23

ufologist commented on 26 Nov 2015

上面貌似沒有一份完整可用的 demo 代碼.

因而乎試着用 flexible 作了個頁面 flexible.html, 須要的同窗請帶走.

另外若是是簡單的專題着陸頁須要適配方案, 能夠試一試 responsive-page, 很差意思, 我賣了個瓜...

dengxiaozhen commented on 26 Nov 2015

@ufologist 666666

dengxiaozhen commented on 26 Nov 2015

@ufologist 看了你的demo發現一個相似卡頓的問題，後來一想多是 Flexible庫的問題。由於

<meta name="viewport" content="">

是經過js插入進去的，那麼當我變化完視口的時候，再修改根節點的html字號，因此會出現這樣的問題

圖片不會跟隨視口的變化及時變化

xff1874 commented on 26 Nov 2015

以6 位原型，那麼6 plus 是414*3的，那麼750的圖片，仍是會出現圖片模糊的問題，大家是如何處理的呢。

dengxiaozhen commented on 27 Nov 2015

@xff1874 設計稿作寬 1242px

Contributor

airen commented on 27 Nov 2015

爲了知足有須要的同窗，今天添加了一個DEMO。友情提示:DEMO沒有通過全部設備的測試，有可能在部分設備存在細節上差別。

DEMO

請用手機掃下面的二維碼

dengxiaozhen commented on 27 Nov 2015

@airen 給大漠點贊

taxi666 commented on 27 Nov 2015

爲何會有1125 的視覺稿尺寸？iphone6s的分辨率是1080啊

dengxiaozhen commented on 27 Nov 2015

@taxi666 多是愛瘋6的物理像素乘以3獲得的 375*3=1125

Contributor

airen commented on 27 Nov 2015

@linjinying 有關於CSS Sprites的，咱們團隊的經驗是請不要再使用CSS Sprites，相關的介紹能夠看看下面兩篇文章中對應的內容：

airen referenced this issue in amfe/lib-flexible on 27 Nov 2015

Closed

設計稿到rem轉換 #7

wenroo commented on 27 Nov 2015

@vvchen 我也一直是這麼幹的，這樣換算真的很方便，雖然寫文本單位的時候會有些誤差，可是都在可控範圍。

amazg commented on 28 Nov 2015

感謝分享~

geeeeeeeeek commented on 29 Nov 2015

很讚的分享

yuu2lee4 commented on 30 Nov 2015

不錯不錯以前本身寫了一個自適應動態更改htmlfontsize的js 比起來太簡陋了問個問題直接設置html fontsie爲固定的100px 有什麼缺點呢

chenbiting commented on 30 Nov 2015

@yuu2lee4 直接設置 html fontSize的話，rem就沒有用了

zhangzhaoaaa commented on 30 Nov 2015

@chenbiting 請你試一下再說,rem的單位是root元素的font-size,在其定義中並無說不能設置html的font-size的固定值

jerryyan1990 commented on 30 Nov 2015

適配設備纔是最要命的，感謝分享乾貨！

xiaobinwu commented on 6 Dec 2015

mark

grantCHG commented on 8 Dec 2015

爲何只在iOS下的dpr爲2和3的屏用2倍的方案，其他的相似android用1倍方案呢

w3cay commented on 8 Dec 2015

同樓上問題，在安卓機是1倍的適配，可是明明devicePixelRatio爲2。

wssgcg1213 commented on 8 Dec 2015

我猜是安卓下會有不少bug，參考集團gitlab裏mbase的Flexible.js方案，實用後收到不少安卓下兼容性的問題。可見手掏的這一套lib.flexible 仍是相對保守可靠

riskers commented on 11 Dec 2015

@ireliale 你的那種方法有案例麼？

w3cay commented on 17 Dec 2015

爲何最大根元素font-size最大54px?

tonyljl526 commented on 17 Dec 2015

請問下，爲何在dpr=2和3的 iphone手機上面 border 設置爲1 的時候顯示異常啊？好比有個場景是：添加到購物車，加減號的border設置爲1px點擊的時候會有異常的狀況。是否和 meta設置有關？ content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no 都爲0.5 和0.3333333的時候邊框會有異常，請問淘寶是怎麼解決的呀？

zheyueguohou commented on 24 Dec 2015

@airen 若是字體大小直接用em的話，會直接根據body或者父元素的大小自動換算，而body直接經過js算好了如：12px、24px、36px。這樣就不用下面的這樣寫法了，是這樣的嗎？
.flag .flag-price strong{font-size:16px}
[data-dpr="2"] .flag .flag-price strong {
font-size: 32px
}
改成：
.flag .flag-price strong{font-size:1.3333em}

Contributor

airen commented on 24 Dec 2015

@zheyueguohou 那也不必定。由於em單位不是相對於body。而是相對於其父元素，假設這樣的場景：

<body>
      <div class="parent"></div> <div class="parent"> <div class="children"></div> </div> </body>

若是這樣設置 font-size:

body {font-size: 12px} .parent{font-size: 2em;} .children{font-size: 3em;}

那麼他們的font-size分別是：

body ==> 12px
.parent ==> 12px * 2 = 24px;
.children ==> 24px * 3 = 72px;

因此使用em作爲單位仍是要注意一些。詳細的能夠看看《CSS中強大的EM》。更多有關於CSS單位的介紹能夠點這裏。

zheyueguohou commented on 24 Dec 2015

@airen 其實我上面也說了父元素，因此用em的時候只須要注意父元素的font-size，加上一個頁面大部分的字體大小都是相同的，只須要對特定的大小設置em。這種方法的弊端就是須要時刻注意父元素的font-size。不過仍是謝謝@airen的回答^_^...

Contributor

airen commented on 24 Dec 2015

@w3cay 引用@terrykingcha的話來回：

這個540實際上是個經驗值，或者最大值，這個經驗是怎麼得出來的呢？
目前主流手機最大的css像素尺寸，是540（好比devicePixelRatio爲2，分辨率是1080x1920的手機），因此用了這個經驗值。這樣可讓在ipad橫屏這種狀況下瀏覽無線頁面，不至於由於拉伸適配後體驗太差。
body上設置12 * dpr的font-size值，爲了重置頁面中的字體默認值，否則沒有設置font-size的元素會繼承html上的font-size，變得很大。

airen referenced this issue in amfe/lib-flexible on 24 Dec 2015

Closed

今天看了源碼有點不明白 #14

laijuncheng commented on 24 Mar 2016

有些安卓設備下，HTML的font-size是54PX，這時該怎麼辦呢？好比我司的一個同事手機分辨率是720X1280，這時的font-size是54PX，尺寸就會小不少，仍是說我對這篇文章的理解有偏差？

camnpr commented on 28 Mar 2016

好文。。。

eijil commented on 28 Mar 2016

我想知道demo中 flag-item.figcaption樣式中 wdith:133rem怎麼算出來的？

zhuziyi1989 commented on 6 Apr 2016

流明。

zwj47 commented on 11 Apr 2016

學習了

121595113 commented on 14 May 2016

看了好幾遍這個庫了。以前用過一次，寫出來的頁面樣式沒有任何問題，可是在寫事件的時候出現了事件偏移的問題。沒找到解決方法，最終放棄了。推薦一個純css的H5適配方案給你們，也請大漠幫忙看看傳送門

whatlife commented on 16 May 2016 • edited

@DoranYun，我猜想是由於變化的字體的font-size沒有設置，是繼承自父級元素的font-size吧？我有遇到過相似狀況：
html

<div>
<p>我是一段文字</p>
</div>

css

div{font-size: 0.75rem}
p {...}

這個時候刷新頁面，p的文字就會先大，後又變成.75rem，肉眼看起來就是屏幕閃爍

MeCKodo commented on 16 May 2016

@whatlife 好像有遇到過即便寫了也會閃爍，不知道有沒有好的解決方案，咱們如今是直接用px寫了，就不會閃爍

ggpp224 commented on 16 May 2016

您好：
我不明白一點： initial-scale 爲何要根據dpr進行縮放呢。設爲固定值1，再根據屏幕寬度計算rem相對值能夠嗎？由於我在實踐中發現不一樣的內核在initial-scale進行縮放時會對ui產生意想不到的問題。好比textarea字體overflow不是hidden的狀況下寬度大於大概75%時會放大， div滾動條在dpr爲3的狀況下會縮小到一條細線。

chshouyu commented on 17 May 2016

背景圖是否是隻須要切一個最高像素的就能夠了？

luzhilin commented on 23 May 2016

@whatlife 字體保留px 建議用gulp將px轉化成rem

zhoufenfens commented on 23 May 2016

字體用px,那在750上設計好的font-size，放在ip5上不會顯得字體很大嗎

flyer153 commented on 25 May 2016 • edited

mark，字體這個用px若是能改善就行了，另外文檔寫的雖然不少，但感受用起來仍是不方便，好比640的寬該怎麼用並無詳細的說明，只能本身去摸索。

webliving commented on 28 May 2016

div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 默認寫上dpr爲1的fontSize
}

[data-dpr="2"] div {
font-size: 24px;
}

[data-dpr="3"] div {
font-size: 36px;
}

這樣dpr 不爲 2， 3 的字體會過小吧？？

bluezhan referenced this issue on 2 Jun 2016

Open

手機淘寶前端的圖片相關工做流程梳理 #8

galenjiang commented on 6 Jun 2016 • edited

我發現一個很奇怪的現象。當設計稿爲iphone6時，爲了好計算，我沒有按照10來除，而是換成7.5的來作計算。頁面在渲染字體大小時，超過某個大小（如0.14618rem）時，會被放大處理，這種狀況在chrome中產生，手機測試沒有問題，雖然不影響用戶體驗，但在開發中會形成很大的麻煩。因爲安卓系通通一設置dpr=1則沒有這樣的狀況出現。還有個特別奇怪的現象，假如按照10來處理，除了chrome下由於字體不能小於12px的狀況，並不會出現被放大的狀況。

dd1994 referenced this issue on 7 Jun 2016

Open

在移動端怎麼適配 #38

zhansingsong commented on 13 Jun 2016 • edited

@airen 請教一個問題？在px2rem的mixin中
// If the value is zero or not a number, return it
@if $value == 0 or type-of($value) != "number"{
$rem-values: append($rem-values, $value / $baseline-rem);
}
爲啥樣要這樣處理？若是這樣處理怎麼調用？
我理解是這樣調用：@include px2rem('background-size', 230 24);
若是這樣調用，type-of($value) != "number"應該是type-of($value) == "number"

Rookiewan commented on 13 Jun 2016

@galenjiang 我也遇到同樣的問題了，chrome上看起來有點大，不知道是否是chrome的計算問題，可是，看了本文的demo，發現不會發生這種現象，不知道是否是個人chrome有毒。

huoruji commented on 15 Jun 2016

你們好，我如今遇到一個bug，就是給一個div單獨設置上下邊框都爲1px的時候，在ios下只有一個邊框的線會縮小成0.5px，另外一條仍是1px，有點詭異，不知道你們有麼有遇到過

dd1994 commented on 15 Jun 2016

@huoruji 你卻是發一個外網能夠訪問的 demo

huoruji commented on 16 Jun 2016

@dd1994 很差意思，我如今沒有外網訪問的地址，只能附圖一張，只有第一條上邊框和最後一條下邊框的線縮成0.5px，中間的線都是1px

renxj referenced this issue in weixin/tmt-workflow on 24 Jun 2016

Closed

雪碧圖自動適配問題 #44

weapon-xx commented on 27 Jun 2016

學習了，感謝分享~

SenYu commented on 27 Jun 2016

@huoruji 作這種邊框ios 上建議用一張1px高的圖片來作

huoruji commented on 27 Jun 2016

@SenYu 用圖片那這樣不會影響到渲染的效率麼？

SenYu commented on 27 Jun 2016

@huoruji 指render部分？這要有性能問題也沒誰了…………用base64硬編碼到css，抽象成一個class，設置background-image和repeat，哪裏要用就把class寫過去，別用一整個background屬性覆蓋就行……

huoruji commented on 27 Jun 2016

@SenYu 醍醐灌頂，多謝分享~

flyer153 commented on 28 Jun 2016

用Flexible寫了幾個項目以後發現，仍是存在一些問題，好比作活動頁面時候字體有時候爲14或者16，這樣當dpr_2 dpr_3的時候字體就不標準了，顯得很是大，須要手動去調整倍數。

Rookiewan commented on 28 Jun 2016

分享一個
font boosting 谷歌控制檯字體顯示錯亂問題

dd1994 commented on 28 Jun 2016

@flyer153 你把 dpr 都設置爲 1 不就行了

junhey commented on 30 Jun 2016

最近接觸移動端比較多以後才發現了相似的問題，爲阿里點贊

lienmac referenced this issue in lienmac/learnGulp on 30 Jun 2016

Open

安裝gulp #1

flyer153 commented on 1 Jul 2016

@dd1994 感謝回答，試過了，都設置爲1不行，在有些手機上字體過小了。

dd1994 commented on 1 Jul 2016

@flyer153 安卓機器上 flexible 都是自動把 dpr 設爲1的!

This was referenced on 1 Jul 2016

Open

班會第 15 期 f2e-journey/xueqianban#17

Open

寫給本身，梳理一下我如今對前端知識結構的理解 LeuisKen/leuisken.github.io#3

eric2013 commented on 7 Jul 2016

請問一下你的那些測試數據是經過js插件實現？

fromIRIS commented on 12 Jul 2016

有個疑問：
在ios下根據dpr的不一樣將頁面進行縮放有沒有絕對的必要？

if (!dpr && !scale) {
        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 {
            // 其餘設備下，仍舊使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

咱們知道動態的改變initial-scale會改變頁面layout viewport，從而改變頁面的html標籤的寬度。
如圖，

這樣有一個好處是徹底的高清顯示，改善了「著名」的border:1px 問題。見鏈接：http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041

可是除此以外我好像找不到其餘這樣作的理由了。

至於retina圖片的適配，dpr限定爲1也是一樣能操做的（@2x圖）

dpr進行變換還要去維護字號在不一樣dpr下的兼容。

基於這幾個考量？flexible.js中將iphone條件下的initial-scale進行動態變換真的有必要嗎？

zchen9 referenced this issue in zchen9/code on 16 Jul 2016

Open

20160606 - 20160710 #4

Leega0 commented on 22 Jul 2016

這時候若是又要使用媒體查詢好像有些不便了

jyzwf commented on 1 Aug 2016

請問這個框架在安卓和蘋果的微信端是否是良好支持呢？

youngwind commented on 2 Aug 2016

@fromIRIS 我也有一樣的疑問。

if (!dpr && !scale) {
        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 {
            // 其餘設備下，仍舊使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

這一段代碼，把全部安卓機的dpr假定爲1（理由是部分安卓機的dpr並不許確），也就是說，其實dpr是多少並不影響佈局。爲何要引入dpr和scale呢？
我看了這篇文章，是否是爲了解決 1px border和高清圖片的問題？那意思是否是說，在全部的安卓機上其實都不是高清圖片？

fwon commented on 4 Aug 2016

@fromIRIS @youngwind +1

youngwind referenced this issue in youngwind/blog on 15 Aug 2016

Open

如何開發一個移動web UI組件庫：適配篇 #82

clownvary commented on 15 Aug 2016 • edited

看了幾遍文章，而後本身試了試，我專門用的們的750x1600的設計稿來作得，我遵循了文章中的原則：

1.嚴格按750得高清樣稿的尺寸編寫css
2.字體基本沒有用rem
3.最後使用postcss_px2rem,編譯
結果在ip5/6/6plus/一些安卓機上都很正常，但有個問題，_在ipad或者各類設備橫屏的狀況下，樣式就無法撐開_，像這樣

我調了大半天也不知道問題在哪，這是個人demo，麻煩看下是怎麼回事
update:已經修復好了，是條目欄應該用100%的寬度。

在這裏個人理解是，若是你的項目要適配移動設備，同時也對pc或大屏幕尺寸設備友好顯示的話，若是是按照750xXXX的設計稿設計的話，在這種外部container或者容器中若是是佔滿的話，就不要使用固定的750px,而是直接用100%，在內部的各組件就按設計稿的尺寸，該是多少就寫多少，最後使用px2rem進行轉換。

lijinpeng7364 commented on 16 Aug 2016

@clownvary 這個庫自己設定了最大值，當頁面寬度大於某個值的時候，計算rem基數的基準就是這個值而不是頁面實際的寬度。這種狀況下，計算出來的rem的基數就會比實際要小，某些元素的屬性實際展示就會比預想的要小。實際上，我以爲淘寶的想法應該是這個庫自己是適用於移動端的頁面，是小頁面通用的，而當頁面大於某個值的時候，這一套體系下不少東西就不適用了，好比說字體或者某些元素的寬度之類的，這種狀況下他們推薦的作法應該是以他們設定的這個值爲基準來佈局，可是把頁面的主體元素居中，兩邊留空。

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;

wy2016xiao commented on 18 Aug 2016

今天用這套方案作了一個手機網頁，在適配手機QQ瀏覽器的時候發生了問題，具體狀況就是100%寬度在手機QQ瀏覽器上出現變寬了，致使出現橫向滾動條，而且全部內容都變大了一圈，求大牛解決

fengyuanzemin commented on 29 Aug 2016 • edited

visual viewport是可見視口，不是虛擬視口

wweggplant commented on 5 Sep 2016

佈局上單位使用動態計算出rem,佈局使用flex,字體使用px

flyer153 commented on 7 Sep 2016

@wweggplant 佈局不用flex貌似也沒問題吧！

cwtuan commented on 8 Sep 2016

@lijinpeng7364
我在作大頁面的時候，直接拿掉

if (width / dpr > 540) {
    width = 540 * dpr;
}

eyeA commented on 9 Sep 2016

yes

dingdingdw commented on 12 Sep 2016 • edited

有一處沒看懂，你文中有一段提到flexible將設計圖分爲100份，1份被看做1a，也就是設計圖被分爲了100a；然後面一段又說示例設計圖就被分爲了10a？？？什麼意思？？？即便是10a，那寬度不該該是1rem嘛？由於1rem被認爲是10a啊？？？求解釋！

xiaoyann commented on 12 Sep 2016

爲何還有人在用這個？解決什麼問題？

fromIRIS commented on 12 Sep 2016

@xiaoyann 適配不一樣屏啊

tangshengfei commented on 13 Sep 2016

大致佈局結構用flex，具體涉及到大小具體單位設置的話就用它，都有用。

shineSnow commented on 21 Sep 2016

受教了

kafeigeiwo commented on 22 Sep 2016

很感謝您回答了我長期以來不清不楚的問題！！！太棒了！！！！

Alan-tao commented on 30 Sep 2016

這個例子怎麼下載尼

zhiqiang21 referenced this issue in zhiqiang21/blog on 6 Oct 2016

Open

再談移動端適配和點5像素的由來 #30

zerofront commented on 8 Oct 2016

想請教一下,爲何不直接用百分比去實現佈局,而用這個?

4013465w commented on 8 Oct 2016

@zerofront 水平能夠，垂直呢？

MoyanGG commented on 10 Oct 2016

@zerofront 高度在使用有些時候使用百分比不方便

shuijingleihen commented on 24 Oct 2016

我想問下爲何Android系列的dpr要通通設置爲1

Youbaofeng commented on 27 Oct 2016 • edited

讚了一下 wy2016xiao 的回答，
我在開發中也接觸過這樣的問題，不知道什麼緣由，JS不能獲得準確的屏幕寬度致使頁面溢出。
用小米4的微信自帶瀏覽器打開，解析的font-size = 98px; dpr=2 可是其實這個屏幕寬度只有 360px;

Josieee commented on 8 Nov 2016

initial-scale=0.5 或者爲0.3333 是否是會對二維碼識別有影響，由於發現改成1的話在微信ios中能識別，可是0.5跟0.333的狀況下在微信ios版中都識別不了。有沒有人遇到過？

tiansn referenced this issue in tiansn/blog on 10 Nov 2016

Open

移動端自適應方案調研 #2

caowenhai888 commented on 5 Dec 2016

我以前一直使用這種方式請問有什麼不一樣和弊端麼

(function() {
	var b = navigator.userAgent;
	ipad = b.match(/(iPad).*OS\s([\d_]+)/) ? !0 : !1;
	iphone = !ipad && b.match(/(iPhone\sOS)\s([\d_]+)/) ? !0 : !1;
	ios = ipad || iphone;
	var a;
	if (ios && 2 <= window.devicePixelRatio) {
		a = .5;
		b = 2;
		a = '<meta id="viewMeta"content="width=device-width,initial-scale='+ a +',minimum-scale='+ a + ',user-scalable=no"name="viewport">';
		var c = document.getElementById("viewMeta"),
				d = c.parentNode;
		d && d.removeChild(c);
		alert(a)
		document.write(a);
		document.documentElement.style.fontSize = 50 * b + "px"
	}
})();

aweakcoder commented on 5 Dec 2016

請問android手機放大系統字體，頁面總體會放大，這個問題咋解決呢

rocky-191 commented on 6 Dec 2016 • edited

@airen 請教下，直接引入這個庫就能夠嗎？不用作其餘配置,頂部也不用寫<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">？

w3cay referenced this issue in w3cay/blog on 7 Dec 2016

Closed

優化移動端適配方案 #1

chrisbobi commented on 7 Dec 2016

爲何寫多個圓，設置圓爲rem單位，有些顯示的非正圓，會變成橢圓。border-radius:100%，是這麼設置的！

wbpmrck commented on 8 Dec 2016

移動端的viewport太窄，爲了能更好爲CSS佈局服務，因此提供了兩個viewport:虛擬的viewportvisualviewport和佈局的viewportlayoutviewport。

這裏"visual viewport"不該該翻譯爲「虛擬的」，而應該是「視覺視口」吧

daimingjun commented on 9 Dec 2016

關於 border 怎麼使用呢？好比 border: 1px solid #ddd; 中的 1px 也要轉成 rem 嗎？

mengxingshike2012 commented on 15 Dec 2016

受教了

p2227 referenced this issue in p2227/p2227.github.io on 25 Dec 2016

Open

手機屏幕適配：原理與解決方案 #16

zdddrszj commented on 27 Dec 2016

有rem爲何還用scale

wind-stone commented on 3 Jan

請教一下：
一、android 設備即便 DPR = 2/3 也不作縮放處理，是基於什麼考慮？
二、對段落字號作特殊處理，原先 CSS 裏只要產出一種關於字號的規則，由於不一樣的 DPR 如今要產出裏會有三種不一樣的規則，這裏是否能夠優化？
`
[data-dpr="1"] #page-slogan span {
font-size: 12px;
}

[data-dpr="2"] #page-slogan span {
font-size: 24px;
}

[data-dpr="3"] #page-slogan span {
font-size: 36px;
}
`

jr-haynas commented on 5 Jan

大漠老師，我在引用這個flexiable的時候，字體一開始是能夠適配的，可是縮放瀏覽器，刷新頁面的時候就不能適配了，這是什麼問題呢？是否是環境仍是哪裏配置除了問題啊？

leoyaojy referenced this issue in leoyaojy/tips on 8 Jan

Open

十、前端資源彙總 #10

yohehc commented on 10 Jan

請教一下，爲何要將視覺稿放大1.5倍再切呢？謝謝~

cy0707 commented on 12 Jan • edited

大漠老師，對您的那個使用Sass的混合宏px2rem有一點疑問。想請教一下。

@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){ //Conver the baseline into rems $baseline-rem: $baseline-px / 1rem * 1;

這裏的$baseline-px / 1rem除法中$baseline-px默認值是否是不該該帶單位。
單位不一樣，是不能相除的。編譯會出錯的吧。

還有這個同窗@zhansingsong提出的那個問題。

@else {
       //Create an empty list that we can dump values into $rem-values:(); @each $value in $px-values{ // If the value is zero or not a number, return it @if $value == 0 or type-of($value) != "number"{ $rem-values: append($rem-values, $value / $baseline-rem); } } // Return the property and its list of converted values #{$property}: $rem-values; }

這裏type-of($value) != "number"判斷條件應該是等於吧。否則的話，這樣調用的話，
編譯會出現以下錯誤。

.box {
   @include px2rem(padding, 20 40); } //() isn't a valid CSS value.

若是想不帶單位的調用。按您寫的那種方式的話。須要把默認,$baseline-px的單位去掉，
還有那個判斷條件也要改一下。

我還想到若是帶單位的調用的話，我稍微修改了一下。

@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){ //Conver the baseline into rems // $baseline-rem: $baseline-px / 1rem * 1; // @debug #{$baseline-rem}; //Print the first line in pixel values @if $support-for-ie { #{$property}: $px-values; } //if there is only one (numeric) value, return the property/value line for it. @if type-of($px-values) == "number"{ #{$property}: $px-values / $baseline-px * 1rem; @debug #{$property}; } @else { //Create an empty list that we can dump values into // example padding: 10px 20px; $rem-values:(); @each $value in $px-values{ // If the value is zero or not a number, return it @if type-of($value) == "number"{ $rem-values: append($rem-values, $value / $baseline-px * 1rem); } } // Return the property and its list of converted values #{$property}: $rem-values; } } .box { @include font-dpr(14px); @include px2rem(padding, 20px 40px); }

cy0707 referenced this issue in cy0707/mobile_develop on 13 Jan

Open

2016對於作前端移動端的一些感悟 #2

Sapphire2k commented on 17 Jan

@dingdingdw 」當前方案會把這3類視覺稿分紅100份來看待（爲了之後兼容vh，vw單位）。每一份被稱爲一個單位a。同時，1rem單位認定爲10a。「確實是 100a 因此 1a = 7.5px

LikeDege commented on 17 Jan

@airen 使用這個適配的方案後，border要怎麼實現，直接設置爲1px後，在不一樣設備像素比的手機上會粗細不一致？求大神解決？

chenchenyuyu commented on 18 Jan

學習了

ecommerce888 commented on 22 Jan

學習了

HelKyle commented on 22 Jan

用過這種方式去作設配，以爲修改 meta 的方式饒了一圈，並且不太直觀。

個人作法仍是保留，meta viewport 不變。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

只不過在使用 rem 單位的時候作了下處理，好比 640 的設計稿

@function rem($num, $base: 32) { @return $num / $base * 1rem; } @function size($size) { @return rem($size * 0.5); }

function size 算是特定的單位，用來把設計稿中的像素值轉爲 rem。

hex-ci commented on 23 Jan

@Uheinanba @meiyzeng 關於 emoji 縮小的問題，我改進了一下 lib-flexible 類庫，表情不會縮小，也不影響 1px 問題。表情縮小的主要緣由是對 viewport 作了縮放。

hex-ci commented on 23 Jan

我作了一個轉換 px 爲 rem 單位的 Atom 編輯器插件: https://github.com/hex-ci/px2rem-plus

主要功能:

自動完成
轉換編輯器中的內容

支持轉換所有文本或選中的文本內容。快捷鍵: ctrl-alt-r。
爲當前文件設置基準像素大小

每一個文件能夠有本身的基準值，而且這個設置會自動保存，下次打開相同文件會自動使用設置過的值。快捷鍵: ctrl-alt-p。
添加註釋

支持給轉換後的 rem 單位添加註釋，例如 /* 100/75 */
保留前導零

若是轉換後的值小於 1，則能夠選擇是否保留前導零，例如 0.5rem(保留) 或 .5rem(不保留)
演示

7demo commented on 24 Jan

@xiaoyann 你有什麼更好的方案？

meiyzeng commented 19 days ago

@hex-ci 表情問題是viewport縮小引發的，你改進後的 lib-flexible 有沒有demo和說明共享？

hex-ci commented 19 days ago • edited

@meiyzeng 我 fork 了一份 lib-flexible，主要改動就是能夠自定義縮放大小(原版就支持)，但能夠保留當前頁面實際的 data-dpr 屬性，因此在不縮放頁面的時候也能解決 1px 問題。

rocky-191 commented 18 days ago

有完整的代碼實例嗎？能夠發一份嗎1375022007@qq.com

earlymeme commented 15 days ago

mark

rainbowzx commented 15 days ago

能夠發我一份嗎發自個人 iPhone

…

rccoder commented 4 days ago

@rainbowzx https://github.com/hex-ci/lib-flexible 不就是這個嗎

使用Flexible實現手淘H5頁面的終端適配

目標

痛點

手淘團隊適配協做模式

前端開發完成終端適配方案

一些基本概念

視窗 viewport

物理像素(physical pixel)

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

CSS像素

屏幕密度

設備像素比(device pixel ratio)

meta標籤

CSS單位rem

前端實現方案

lib-flexible是什麼？

使用方法

flexible的實質

案例實戰

建立HTML模板

把視覺稿中的px轉換成rem

如何快速計算

CSSREM

CSS處理器

Sass

PostCSS(px2rem)

文本字號不建議使用rem

CSS

效果

iPhone4

iPhone6+

總結

Update

Update【2016年01月13日】

把視覺稿中的`px`轉換成`rem`

文本字號不建議使用`rem`