2. 程式人生 > >細說移動端 經典的REM佈局 與 新秀VW佈局

細說移動端 經典的REM佈局 與 新秀VW佈局

阿新 • • 發佈：2018-12-09

和以往一樣，本次專案也放到了 Github 中，歡迎圍觀 star ~

1. 前言

    方案選擇

    食用方式

一、前言

說到前端頁面的佈局方案，可以從遠古時代的Table佈局說起，然後來到 DIV+CSS佈局，之後有了Float佈局，Flex佈局，Column佈局，Grid佈局等等。

而另一方面，還有一些 佈局概念：

1. 靜態佈局

直接使用px作為單位

2. 流式佈局

寬度使用%百分比，高度使用px作為單位

3. 自適應佈局

建立多個靜態佈局，每個靜態佈局對應一個螢幕解析度範圍。使用 @media媒體查詢來切換多個佈局

4. 響應式佈局

通常是糅合了流式佈局+彈性佈局，再搭配媒體查詢技術使用

5. 彈性佈局

通常指的是rem或em佈局。rem是相對於html元素的font-size大小而言的，而em是相對於其父元素（非font-size的是相對於自身的font-size）

本文不對這些概念做太多的解釋說明，主要記錄一下整理過程中比較重要的點

如今移動端佈局中免不了要支援高清裝置，機型也比較複雜，需要一套比較完善的佈局方案來支援（在整體結構上解決多裝置寬的適配問題）。

淘寶的 Flexible 讓REM佈局得以流行開來，而此Flexible實現也有一些不足，此外，也湧現出了多種實現REM佈局的方案

比如直接使用  html{ font-size:625%; } 基準值，配合JS來設定根元素字型大小

或者使用媒體查詢來設定根元素字型大小

　　@media screen and (min-width: 320px) {
        html,body,button,input,select,textarea {
            font-size:12px!important;
        }
    }

    @media screen and (min-width: 374px) {
        html,body,button,input,select,textarea {
            font-size
 
:14px!important;
        }
    }

但使用rem來佈局的方案並不太正統，它有一些hack的特點

比較規範的方式是使用vw單位，隨之而來的就是後起之秀 VW佈局

花了一些時間整理了REM佈局和VW佈局在實際頁面中是如何運用的，如果你有興趣，就往下看吧~

專案地址，歡迎圍觀~

二、基本概念

物理畫素(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的裝置，做一些樣式適配。

或者使用 resolution | min-resolution | max-resolution 這些比較新的標準方式

 

上圖中， Retina為高清裝置螢幕，它的一個css畫素對應 了4個物理畫素

點陣圖畫素

一個位影象素是柵格影象(如：png, jpg, gif等)最小的資料單元。每一個位影象素都包含著一些自身的顯示資訊(如：顯示位置，顏色值，透明度等)。

理論上，1個位影象素對應於1個物理畫素，圖片才能得到完美清晰的展示

如上圖：對於dpr=2的retina螢幕而言，1個位影象素對應於4個物理畫素，由於單個位影象素不可以再進一步分割，所以只能就近取色，從而導致圖片模糊(注意上述的幾個顏色值)。

所以，對於圖片高清問題，比較好的方案就是兩倍圖片(@2x)。

如：200×300(css pixel)img標籤，就需要提供400×600的圖片。

縮放比 scale

縮放比：scale = 1/dpr

視窗 viewport

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

移動端的viewport太窄，為了能更好為CSS佈局服務，所以提供了兩個viewport:虛擬的visualviewport和佈局的layoutviewport。

viewport的內容比較深，推薦閱讀PPK寫的文章，以及中文翻譯

視窗縮放 viewport scale

在開發移動端頁面，我們可以設定meta標籤的viewport scale來對視窗的大小進行縮放定義

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

rem單位

font size of the root element.

rem就是相對於根元素<html>的font-size來做計算

視窗單位

  • vw : 1vw 等於視窗寬度的1%
  • vh : 1vh 等於視窗高度的1%
  • vmin : 選取 vw 和 vh 中最小的那個
  • vmax : 選取 vw 和 vh 中最大的那個

相容性：在移動端 iOS 8 以上以及 Android 4.4 以上獲得支援

三、REM佈局

rem佈局的核心是設定好根html元素的font-size

一般來說，為了防止在高清螢幕下畫素不夠用導致模糊，我們拿到的設計稿是640px（iphone5 裝置寬為320px）或750px的兩倍稿（iphone6 裝置寬為375px），按照裝置寬度做了兩倍的大小。

那開發的時候在CSS中要設定什麼尺寸呢，如何做到一份設計稿適配到不同機型中

最佳方案是：在photoshop或其他工具中量出某個元素或圖片或文字的尺寸，然後直接寫到程式碼中。額外的適配不需要理會。

width: px2rem(200);

基於此，可以使用SCSS來提供一系列的基礎支援

/* 移動端頁面設計稿寬度 */
$design-width: 750;
/* 移動端頁面設計稿dpr基準值 */
$design-dpr: 2;
/* 將移動端頁面分為10塊 */
$blocks: 10;
/* 縮放所支援的裝置最小寬度 */
$min-device-width: 320px;
/* 縮放所支援的裝置最大寬度 */
$max-device-width: 540px;

/*
    rem與px對應關係，1rem代表在JS中設定的html font-size值（為一塊的寬度），$rem即為$px對應占多少塊

        $px                     $rem
    -------------    ===    ------------
    $design-width              $blocks
*/

/* 單位px轉化為rem */
@function px2rem($px) {
    @return #{$px / $design-width * $blocks}rem;
}

/* 單位rem轉化為px，可用於根據rem單位快速計算原px */
@function rem2px($rem) {
    @return #{$rem / $blocks * $design-width}px;
}

為了便於計算，我們將頁面分為10個塊，根據對映關係，我們只需要計算某個元素在頁面中佔了多少塊（$rem），結合html中font-size的大小，就能在頁面上設定好正確的元素大小

在對應的JS檔案中

var docElem = document.documentElement,
        metaElem = document.querySelector('meta[name="viewport"]'),
        dpr = window.devicePixelRatio || 1,
        // 將頁面分為10塊
        blocks = 10,
        // 需要限制的最小寬度
        defaultMinWidth = 320,
        // 需要限制的最大寬度
        defaultMaxWidth = 540,
        // 計算的基準值
        calcMaxWidth = 9999999;

將頁面按照clientWidth進行分割成塊，和CSS對應起來

// 設定docElem字型大小
    function setFontSize() {
        var clientWidth = docElem.clientWidth;

        clientWidth = Math.max(clientWidth, defaultMinWidth * dpr)

        // 調整計算基準值
        if (calcMaxWidth === defaultMaxWidth) {
            clientWidth = Math.min(clientWidth, defaultMaxWidth * dpr);
        }

        docElem.style.fontSize = clientWidth / blocks + 'px';
    }

    setFontSize();

    window.addEventListener(window.orientationchange ? 'orientationchange' : 'resize', setFontSize, false);

1px在高清螢幕中的顯示問題

上圖左邊設定了css為1px的效果，實際上我們需要的是右邊的效果

明顯左邊的粗了一些，因為此時1個css畫素包含了4個（dpr為2）物理畫素，實際需要的是1px的物理畫素，而非css畫素

為了解決這個問題，有很多方法

在REM佈局中普遍採用的是viewport scale 視窗縮放的方式

視窗縮放很簡單，其實就是直接將meta標籤中的scale進行更改。比如dpr為3，則scale為

但縮放在某些安卓裝置中支援度不太好，我們還需要做其他檢測（檢測了現用的一些機型，應該還不完整哈）

// 大部分dpr為2以下的安卓機型不識別scale，需設定不縮放
    if (navigator.appVersion.match(/android/gi) && dpr <= 2) {
        dpr = 1;
    }

    setScale(dpr);

    // 企業QQ設定了scale後，不能完全識別scale（此時clientWidth未收到縮放的影響而翻倍），需設定不縮放
    if (navigator.appVersion.match(/qq\//gi) && docElem.clientWidth <= 360) {
        dpr = 1;
        setScale(dpr);
    }

    docElem.setAttribute('data-dpr', dpr);

    // 設定縮放
    function setScale(dpr) {
        metaElem.setAttribute('content', 'initial-scale=' + 1 / dpr + ',maximum-scale=' + 1 / dpr + ',minimum-scale=' + 1 / dpr + ',user-scalable=no');
    }

同時將最終計算的dpr放到html中，供css做一些特殊適配。看看頁面效果

設定容器的最大最小寬度

上圖中，隨著拉伸，內容區越來越大，各元素尺寸也越來越大。已經進行了最小寬度的處理。

要控制縮放的程度，關鍵有兩個點：尺寸計算基準、容器寬度

<!DOCTYPE html>
<html>
    <head>
        <title>REM佈局</title>
        <meta charset="utf-8">
        <meta lang="zh-CN">
        <meta name="viewport" data-content-max content="width=device-width,initial-scale=1,user-scalable=no">
        <link rel="stylesheet" href="./rem.css">
        <script src="./rem.js"></script>
    </head>

    <body data-content-max>
        <section class="container">

尺寸計算基準位於 meta標籤中的 data-content-max，容器寬度位於 body標籤中

在JS中進行匹配控制，需要注意的是，因為我們已經進行了視窗的縮放，clientWidth將會比裝置寬度大，要記得以dpr進行翻倍

    // 需要限制的最小寬度
    var defaultMinWidth = 320,
        // 需要限制的最大寬度
        defaultMaxWidth = 540,
        // 計算的基準值
        calcMaxWidth = 9999999;


    if (metaElem.getAttribute('data-content-max') !== null) {
        calcMaxWidth = defaultMaxWidth;
    }


    ...

    // 設定docElem字型大小
    function setFontSize() {
        var clientWidth = docElem.clientWidth;

        clientWidth = Math.max(clientWidth, defaultMinWidth * dpr)

        // 調整計算基準值
        if (calcMaxWidth === defaultMaxWidth) {
            clientWidth = Math.min(clientWidth, defaultMaxWidth * dpr);
        }

        docElem.style.fontSize = clientWidth / blocks + 'px';
    }

在CSS中，簡單地呼叫一下，核心方法已經抽離

html {
    @include root-width();
}
/* html根的寬度定義 */
@mixin root-width() {
    body {
        @include container-min-width();

        &[data-content-max] {
            @include container-max-width();
        }
    }

    /* 某些機型雖然裝置dpr大於1，但識別不了scale縮放，這裡需要重新設定最小寬度防止出現橫向滾動條 */
    &[data-dpr="1"] body {
        min-width: $min-device-width;
    }
}

/* 設定容器拉伸的最小寬度 */
@mixin container-min-width() {
    margin-right: auto;
    margin-left: auto;
    min-width: $min-device-width;

    @media (-webkit-device-pixel-ratio: 2) {
        min-width: $min-device-width * 2;
    }

    @media (-webkit-device-pixel-ratio: 3) {
        min-width: $min-device-width * 3;
    }
}

/* 設定容器拉伸的最大寬度 */
@mixin container-max-width() {
    margin-right: auto;
    margin-left: auto;
    max-width: $max-device-width;

    @media (-webkit-device-pixel-ratio: 2) {
        max-width: $max-device-width * 2;
    }

    @media (-webkit-device-pixel-ratio: 3) {
        max-width: $max-device-width * 3;
    }
}

要注意的是，這裡的max-width也要配上dpr係數

看看成果圖

如果僅僅限制計算基準值，容器不限制（將body標籤中的屬性去掉），就可以實現某種流式效果（另一種方案）

 

 文字大小是否用rem單位

有時我們不希望文字在Retina螢幕下變小，另外，我們希望在大屏手機上看到更多文字，以及，現在絕大多數的字型檔案都自帶一些點陣尺寸，通常是16px和24px，所以我們不希望出現13px和15px這樣的奇葩尺寸。

我們可以選擇使用px直接定義

/* 設定字型大小，不使用rem單位， 根據dpr值分段調整 */
@mixin font-size($fontSize) {
    font-size: $fontSize / $design-dpr;

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

    [data-dpr="3"] & {
        font-size: $fontSize / $design-dpr * 3;
    }
}
@include font-size(30px);

當然了，如果要求不嚴格，也可以直接使用rem單位

四、VW佈局

REM佈局中用到了JS來動態設定html的font-size，可能造成頁面的抖動。

可以考慮比較新的VW佈局，無需使用JS，雖說在移動端 iOS 8 以上以及 Android 4.4 以上才獲得支援，不過還是值得一用的。如果需要相容，可以嘗試 viewport-units-buggyfill

在REM佈局中處理1px問題是用了視窗縮放的方案，在VW佈局中就不用了，轉而使用容器縮放（transform）的方案

呼叫方式形如

height: px2vw(300);

同樣的，我們需要寫個轉換方法

/* 移動端頁面設計稿寬度 */
$design-width: 750;
/* 移動端頁面設計稿dpr基準值 */
$design-dpr: 2;

/*
    vw與px對應關係，100vw為視窗寬度，$vw即為$px對應占多寬

        $px                    $vw
    -------------    ===    ------------
    $design-width              100vw
*/

/* 單位px轉化為vw */
@function px2vw($px) {
    @return ($px / $design-width) * 100vw;
}

/* 單位vw轉化為px，可用於根據vw單位快速計算原px */
@function vw2px($vw) {
    @return #{($vw / 100) * $design-width}px;
}

對於高清螢幕邊框1px問題，有三個方面需要考慮

1. 單邊邊框

2. 多邊邊框

3. 邊框的圓角

1. 單邊邊框比較簡單，本質是在目標元素上加個偽類，設定寬度（左|右邊框）或高度（上|下邊框）為1px，然後在高清螢幕下對齊進行縮放

transform-origin: 0 0;
transform: scaleY(.5);

2. 要讓偽類支援設定多邊邊框，已經不能僅僅使用寬度或高度，而應該在這個偽類上設定多邊邊框，然後設定dpr倍的寬高，再進行縮放（自左上方）

width: 200%;
height: 200%;

transform-origin: top left;
transform: scale(.5, .5);

3. 邊框圓角一般作用於多邊邊框，使用了偽類設定邊框之後，元素本身並沒有邊框，所以我們需要對偽類設定圓角，此外，也需要對元素本身設定圓角

否則就會出現這種尷尬的情況

 

如果只是需要設定圓角，其實也可以不設定邊框，可以使用背景顏色來營造出這種“邊框”的分界，在VW佈局中，顯示地設定邊框可能會造成程式碼量太多

另外要注意的是，圓角如果設定為畫素值（比如50px），在不同的dpr下它產生的圓角效果還是有區別的，所以最好也把dpr作為係數放在圓角中

針對上面三種情況，我們需要寫好一個scss的1px邊框生成器

先來看看怎麼呼叫

/* 底部單個邊框 */
.f-border-bottom {
    @include border(
        $direction: bottom,
        $size: 1px,
        $color: #ddd,
        $style: solid
    );
}
/* 常規多邊邊框 */
.f-border {
    @include border(
        $direction: all,
        $size: 1px,
        $color: #ddd,
        $style: solid
    );
}
/* 多個邊框不同的屬性 */
    &.hover {
        @include border(
            $direction: (top, right, bottom, left),
            $size: (3px, 2px, 1px),
            $color: (#0f0, #ddd),
            $style: dotted
        );
    }
/* 圓角邊框百分比 */
.f-border-radius {
    @include border(
        $direction: all,
        $radius: 50%
    );
}
/* 圓角邊框自定義多個角，順序 */
.f-border-radius {
    @include border(
        $radius: (10px, 20px, 30px, 40px)
    );
}
/* 多個邊框呼叫 */
    &:not(.info-item__tel) {
        @include border(
            $direction: all,
            $size: 1px,
            $color: #ddd,
            $style: solid,
            $radius: 50px
        );
    }

看起來呼叫方式還是有點複雜的，不過應該也還好吧，實在是實現不了像scale縮放那樣直接寫原生border屬性，除非使用構建工具了

這個 border生成器 是怎麼實現的呢？ Show you the code ..

/**
 * 元素邊框
 * @param  {string|list} $direction: all           為all或列表時表示多個方向的邊框，否則為單個邊框
 * @param  {string|list} $size:      1px           邊框尺寸，為列表時表將按照direction的順序取值
 * @param  {string|list} $style:     solid         邊框樣式，高清裝置下僅支援solid，同上
 * @param  {string|list} $color:     #ddd          邊框顏色，同上
 * @param  {string}      $position:  relative      元素定位方式，一般為relative即可
 * @param  {string}      $radius:    0             邊框圓角
 */
@mixin border(
    $direction: all,
    $size: 1px,
    $style: solid,
    $color: #ddd,
    $position: relative,
    $radius: 0
) {
    /* 多個邊框 */
    @if $direction == all or type-of($direction) == list {
        /* 普通裝置 */
        @media not screen and (-webkit-min-device-pixel-ratio: 2) {
            @include border-radius($radius);

            @if $direction == all {
                border: $size $style $color;
            }
            @else {
                @for $i from 1 through length($direction) {
                    $item: nth($direction, $i);

                    border-#{$item}: getBorderItemValue($size, $i) getBorderItemValue($style, $i) getBorderItemValue($color, $i);
                }
            }
        }

        /* 高清裝置 */
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            @include border-multiple(
                $direction: $direction,
                $size: $size,
                $color: $color,
                $position: $position,
                $radius: $radius
            );
        }
    }

    /* 單個邊框 */
    @else {
        /* 普通裝置 */
        @media not screen and (-webkit-min-device-pixel-ratio: 2) {
            border-#{$direction}: $size $style $color;
        }

        /* 高清裝置 */
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            @include border-single(
                $direction: $direction,
                $size: $size,
                $color: $color,
                $position: $position
            );
        }
    }
}

入口 mixin 判斷裝置的dpr，然後選擇直接生成border程式碼，或者分發到 border-single 和 border-multiple 中進行高清螢幕的處理

/* 實現1物理畫素的單條邊框線 */
@mixin border-single(
    $direction: bottom,
    $size: 1px,
    $color: #ddd,
    $position: relative
) {
    position: $position;

    &:after {
        content: "";
        position: absolute;
        #{$direction}: 0;

        pointer-events: none;
        background-color: $color;

        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform-origin: 0 0;
                    transform-origin: 0 0;
        }

        /* 上下 */
        @if ($direction == top or $direction == bottom) {
            left: 0;
            width: 100%;
            height: $size;

            @media only screen and (-webkit-device-pixel-ratio: 2) {
                -webkit-transform: scaleY(.5);
                        transform: scaleY(.5);
            }

            @media only screen and (-webkit-device-pixel-ratio: 3) {
                -webkit-transform: scaleY(.333333333333);
                        transform: scaleY(.333333333333);
            }
        }

        /* 左右 */
        @elseif ($direction == left or $direction == right) {
            top: 0;
            width: $size;
            height: 100%;

            @media only screen and (-webkit-device-pixel-ratio: 2) {
                -webkit-transform: scaleX(.5);
                        transform: scaleX(.5);
            }

            @media only screen and (-webkit-device-pixel-ratio: 3) {
                -webkit-transform: scaleX(.333333333333);
                        transform: scaleX(.333333333333);
            }
        }
    }
}
/* 實現1物理畫素的多條邊框線 */
@mixin border-multiple(
    $direction: all,
    $size: 1px,
    $color: #ddd,
    $position: relative,
    $radius: 0
) {
    position: $position;

    @include border-radius($radius);

    &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        box-sizing: border-box;
        -webkit-transform-origin: top left;

        @media only screen and (-webkit-device-pixel-ratio: 2) {
            width: 200%;
            height: 200%;

            @include border-radius($radius, 2);

            -webkit-transform: scale(.5, .5);
                    transform: scale(.5, .5);
        }

        @media only screen and (-webkit-device-pixel-ratio: 3) {
            width: 300%;
            height: 300%;

            @include border-radius($radius, 3);

            -webkit-transform: scale(.333333333333, .333333333333);
                    transform: scale(.333333333333, .333333333333);
        }

        @if $direction == all {
            border: $size solid $color;
        }
        @else {
            @for $i from 1 through length($direction) {
                $item: nth($direction, $i);

                border-#{$item}: getBorderItemValue($size, $i) solid getBorderItemValue($color, $i);
            }
        }
    }
}

在多邊邊框中，pointer-events: none 的使用屬於核心。為了能夠看到偽類的邊框，偽類將會被置於元素上方，如此便導致了元素被覆蓋不可點選，這個css屬性就解除了這個障礙。

圓角如果使用了百分比，就不需要設定dpr係數了

可以看到，不過這麼一來，會造成程式碼比較冗餘的問題，特別是當我們需要再次覆蓋之前的邊框屬性時。

實現容器固定縱橫比

縱橫比其實還是第一次聽說，做方案調研設計就一併整合過來了

它主要是用於響應式設計中的iframe、img 和video之類的元素，實現縱橫比有很多方法

 這裡使用 padding-top 百分比的方法，實現一下容器內文字區的固定縱橫比

/**
 * 實現固定寬高比
 * @param  {string} $position: relative      定位方式
 * @param  {string} $width:    100%          容器寬度
 * @param  {string} $sub:      null          容器的目標子元素
 * @param  {number} $aspectX:  1             容器寬
 * @param  {number} $aspectY:  1             容器高
 */
@mixin aspect-ratio(
    $position: relative,
    $width: 100%,
    $sub: null,
    $aspectX: 1,
    $aspectY: 1
) {
    overflow: hidden;
    position: $position;
    padding-top: percentage($aspectY / $aspectX);
    width: $width;
    height: 0;

    @if $sub == null {
        $sub: "*";
    }

    & > #{$sub} {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
}
/* 容器寬高比 */
.header {
    @include aspect-ratio(
        // $width: px2vw(600),
        // $sub: ".header-content",
        $aspectX: 375,
        $aspectY: 150
    )
}

padding的百分比是基於元素寬度的，將容器高度設為0，根據盒子模型，則整個元素最終的高度有padding-top來決定

子元素設定絕對定位防止被擠壓，同時撐滿父級容器，即可實現

 

從效果圖能夠看出，美中不足是無法設定容器最大最小寬度，vw是根據裝置寬度進行計算的，所以無法解決。

五、REM + VW佈局

為了解決純VW佈局不能設定最大最小寬度的問題，我們引入REM。

通過配置html根元素的font-size為vw單位，並且配置最大最小的畫素px值，在其他css程式碼中可以直接使用rem作為單位

呼叫方式炒雞簡單

html {
    @include root-font-size();
}
line-height: px2rem(300);

而scss裡面的實現，同樣是先定義一個對映關係。將頁面寬度進行分塊（只是為了防止值太大）

/* 移動端頁面設計稿寬度 */
$design-width: 750;
/* 移動端頁面設計稿dpr基準值 */
$design-dpr: 2;
/* 將移動端頁面分為10塊 */
$blocks: 10;
/* 縮放所支援的裝置最小寬度 */
$min-device-width: 320px;
/* 縮放所支援的裝置最大寬度 */
$max-device-width: 540px;

/*
    rem與px對應關係，1rem代表html font-size值（為一塊的寬度），$rem即為$px對應占多少塊

        $px                    $rem
    -------------    ===    ------------
    $design-width              $blocks
*/

/* html根元素的font-size定義，簡單地將頁面分為$blocks塊，方便計算 */
@mixin root-font-size() {
    font-size: 100vw / $blocks;

    body {
        @include container-min-width();
    }

    /* 最小寬度定義 */
    @media screen and (max-width: $min-device-width) {
        font-size: $min-device-width / $blocks;
    }

    /* 最大寬度定義 */
    &[data-content-max] {
        body[data-content-max] {
            @include container-max-width();
        }

        @media screen and (min-width: $max-device-width) {
            font-size: $max-device-width / $blocks;
        }
    }
}
/* 設定容器拉伸的最小寬度 */
@mixin container-min-width() {
    margin-right: auto;
    margin-left: auto;
    min-width: $min-device-width;
}

/* 設定容器拉伸的最大寬度 */
@mixin container-max-width() {
    margin-right: auto;
    margin-left: auto;
    max-width: $max-device-width;
}

這裡的max-width直接使用寬度值，因為使用的是vw，視窗未縮放

而在頁面標籤（html和body）中，簡單地配上屬性代表是否需要限制寬度即可。

<!DOCTYPE html>
<html data-content-max>
    <head>
        <title>VW-REM佈局</title>
        <meta charset="utf-8">
        <meta lang="zh-CN">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
        <link rel="stylesheet" href="./vw-rem.css">
    </head>

    <body data-content-max>

同樣是計算基準值和容器寬度兩個方面。

如果僅僅限制計算的基準值，也能實現“流式效果”

六、對比選擇

1. 方案選擇

方案是挺多的，可能也不夠完善。要選哪種方案呢？

每個方案都能保證在不同機型下做到一定的適配。

1. 一般來說，可用直接考慮使用REM佈局

2. 因REM使用了JS動態設定html的font-size，且scale對安卓機型不太友好，要求極致的可以選用VW

3. 純VW佈局不支援設定容器最大最小寬高，如果需要此功能則選用 REM + VW佈局

2. 食用方式

怎麼使用呢？

可在Github中對應目錄的 html，js，css檔案，看看是怎麼呼叫的

常規方式是引入公共基礎程式碼，然後在業務程式碼中呼叫

在html檔案中可以配置 data-content-max 引數來限制最大最小寬度

在scss基礎部分還可以自定義這幾個值（如果是REM佈局的，修改這些值還需要在rem.js 檔案中同步修改）

/* 移動端頁面設計稿寬度 */
$design-width: 750;
/* 移動端頁面設計稿dpr基準值 */
$design-dpr: 2;
/* 將移動端頁面分為10塊 */
$blocks: 10;
/* 縮放所支援的裝置最小寬度 */
$min-device-width: 320px;
/* 縮放所支援的裝置最大寬度 */
$max-device-width: 540px;

相關推薦

細說移動端 經典的REM佈局 與 新秀VW佈局

和以往一樣，本次專案也放到了 Github 中，歡迎圍觀 star ~ 1. 前言     方案選擇     食用方式 一、前言 說到前端頁面的佈局方案，可以從遠古時代的Table佈局說起，然後來到 DIV+CSS佈局，之後有了Float佈局，Flex佈局

react移動端的rem佈局

研究了一天多的rem終於有了眉目，下面來說一說 其實我一直糾結的是在react專案中在那裡設定rem與px的對應關係 react中在index.html中把下面這段已壓縮過的 原生JS放在scrip中   !function (e) { function t(a) {

在移動端使用rem佈局後，使用背景圖片出現顯示不正確

原因： 因為圖片設定成背景後，移動端是響應式佈局，就會造成背景圖片無法正確顯示。因為背景圖片也被縮放了。 解決方法： 通過給背景圖片設定 background-size:

vue 移動端專案rem佈局

以上實現轉換適用於： （1）元件中編寫的<style></style>下的css （2）從index.js或者main.js中import ‘../../static/css/reset.css’引入css （3）在元件的<script type=”text/ec

移動端爬坑記 --- （1）佈局與樣式上的奇葩偶遇

前言 彙總下自己搞移動端遇到掉進去的坑，以及脫坑的方案； Flex相容 Flex想要相容眾多花樣式手機，要注意以下這麼些 字首要考慮2009~2012年的語法[webkit-box,flex,flex-box] 少用複合屬性，比如flex:1

移動端用rem使字體自適應

對比 16px size 設置 自適應 使用 pre 感覺 字體大小 　rem是css3引入的新的單位，與px和em相對比，我感覺rem更加便利，尤其是對移動端的字體自適應布局。 　rem是根據HTML的字體大小進行設置的。 　而HTML的基本字體大小是16px，所以可

移動端使用rem同時適應安卓ios手機原理解析，移動端響應式開發

size screen bsp 應用 屏幕 來看 比例 忽略 基礎 rem單位大家可能已經很熟悉，rem是隨著html的字體大小來顯示代表寬度的方法，我們怎樣進行移動端響應式開發呢 瀏覽器默認的字體大小為16px 及1rem 等於 16px 如果我們想要使1rem等於 12

移動端網頁設計經驗與心得

分段 下一條 操作 適應 med 常用 格式 手機版 大於 智能手機發展確實很迅速，像今年，我的大部分工作就都在移動端網頁上。 再往前些年，看到的手機版/移動版網頁，限制於瀏覽器與手機性能，2g網絡速度等 網頁設計無非是藍、黑、白，界面單調，並且要盡可能的設計簡單。

為什麽在移動端用rem圓角不圓

16px med idt ext 計算 11.2 html wid max-width rem是根據網頁效果圖的尺寸來計算的，當然還要借助媒體查詢來完成。例如你的設計稿如果是寬720px的話，那你的文字就要以原始大小除以11.25，就是對應下面媒體查詢720px；例如16p

移動端web，tap與click事件

document 解決 取消 list 所有 ons scrip 還要 時間 一、tap與click的區別 兩者都會在點擊時系統自動觸發，但是在手機WEB端，click會有 200~300 ms。延遲來自判斷雙擊和長按，因為只有默認等待時間結束以確定沒有後續動作發生時，才

移動端頁面：viewport與分辨率的坑

效果 span idt 分辨 name col 移動端 use init <meta name="viewport" content="width=device-width, user-scalable=no"> <meta name=‘

css - 移動端reset匯總與註釋

pla none spa lin nbsp log splay css bubuko 1.解決移動端觸摸a元素，會有藍色陰影 正常狀態： 點擊時狀態： a{ outline:none; -webkit-tap-highlight-c

深入理解移動端像素知識與Viewport知識（轉 ）

num height com 密度 橫豎 行業 alt show 改變大小 一 像素知識 1.1 設備像素(device pixel) 它是物理概念，指的是設備中使用的物理像素(Physic pixel)。這個單位用px表示，它是一個[相對絕對單位

移動端使用rem方法

body add 目錄 asc func list 其他 html con 1 在可以設置網頁標題欄的頁面寫一個匹配手機的方法 <script> function resetWidth() { // 兼容ie瀏覽器 doc

谷歌瀏覽器移動端部分字型大小與設定大小不同

問題描述：為了適配各種移動端裝置，動態設定了viewport縮放，然後動態設定html的font-size大小，用rem佈局。但是在谷歌瀏覽器中檢視的時候出現了問題 1.這個沒問題，font-size設定的.28rem，所以換算成px應該是.28*100=28px；OK，沒毛病，但是下面那行

【VUE移動端適配】VUE使用flexible佈局

配置 flexible 安裝 lib-flexible 在命令列中執行如下安裝： npm i lib-flexible --save 引入 lib-flexible 在專案入口檔案 main.js 裡 引入 lib-flexible // main.js import 'li

移動端網頁開發經驗與心得-解析度、內容與快取

智慧手機發展確實很迅速，像今年，我的大部分工作就都在移動端網頁上。 再往前些年，看到的手機版/移動版網頁，限制於瀏覽器與手機效能，2g網路速度等 網頁設計無非是藍、黑、白，介面單調，並且要儘可能的設計簡單。 現在情況就大不相同了，軟體上webkit核心瀏覽器大行其道，硬體突飛猛進，網速

移動端app測試流程與方法

1、首先是測試資源確認及準備 （1） 產品需求文件、產品原型圖、介面說明文件以及設計說明文件等應齊全； （2） 測試裝置及工具的準備：IOS和andriod不同版本的真機，以及相關測試工具的準備。 2、 測試用例的設計與評審 （1） 根據產品需求文件、產品原型圖等文件，設計客

移動端開發rem適配js程式碼

最近公司的移動端專案較多，就整理了一些移動端常用的一些東西，目前移動端開發大多使用rem方式，簡單方便，只需一行js程式碼就能適配。 下面是適配程式碼： //適配 (function() {         var newRem = function() {      

移動端響應rem dpr viewport設定

(function () { var t; function initHtmlFont(){ var maxWidth = 640; var html = document.documentElement; var windowWidth = html.clientWidt