響應式頁面

• 利用一套代碼實現頁面的布局和排版以適配不同分辨率的設備

兩大問題

• 為不同特性（如橫屏還是豎屏等）的瀏覽器視窗使用不同的樣式代碼
• 讓頁面元素的尺寸能夠依據瀏覽器視窗尺寸變化而平滑變化

解決問題一：根據不同特性（如橫屏還是豎屏等）的瀏覽器視窗使用不同的樣式代碼

使用 Media Queries

• Media Queries 是為指定特性的瀏覽器視窗應用指定樣式【CSS 樣式的過濾器或攔截器】
• 「@media 規則」結合「6 個查詢參數」來攔截設備的瀏覽器特性（如顯示類型、視窗高度、視窗寬度、橫豎屏等）。

6 個參數

用法

• link

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">

• 在 style 標簽或 樣式文件內使用 @media 規則

@media (max-width: 640px) {
  /*當視窗寬度小于或等于 640px 時，這里的樣式將生效*/
}

樣式斷點

Bulma

• 代碼示例

@media (min-width: 769px) {
  /* tablet 及以上的設備，頁面背景色設置為紅色 */
  body {
    background-color: red;
  }
}

在線示例（Media Queries)

• 在線 Media Queries 例子
• Bulma 框架
• 《Responsive Web Design Basic》

解決問題二：讓頁面元素的尺寸能夠依據瀏覽器視窗尺寸變化而平滑變化

1、引入viewport meta標簽

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

• Google 網頁性能分析工具 【PageSpeed Insights】
• 《Using the viewport meta tag to control layout on mobile browsers》
• Google《Configure the viewport》
• Mozilla《@viewport》

2、使用單位

僅使用 vw 作為 CSS 長度單位

• 利用 Sass 函數將設計稿元素尺寸的像素單位轉換為 vw 單位

// iPhone 6尺寸作為設計稿基準
$vw_base: 375; 
@function vw($px) {
    @return ($px / $vm_base) * 100vw;
}

• 無論是文本字號大小還是布局高寬、間距、留白等都使用 vw 作為 CSS 單位

.mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vw(15) vw(10) vw(10); // 內間距
        &_item {
            flex: 1;
            text-align: center;
            font-size: vw(10); // 字體大小
            &_logo {
                display: block;
                margin: 0 auto;
                width: vw(40); // 寬度
                height: vw(40); // 高度
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vw(2);
            }
        }
    }
}

• 1 物理像素線（也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情況）采用 transform 屬性 scale 實現

.mod_grid {
    position: relative;
    &::after {
        // 實現1物理像素的下邊框線
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
    ...
}

• 對于需要保持高寬比的圖，應改用 padding-top 實現

.mod_banner {
    position: relative;
    // 使用padding-top 實現寬高比為 100:750 的圖片區域
    padding-top: percentage(100/750);
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0; 
    }
}

在線體驗

• 視口單位布局 —— vw 單位

vw 搭配 rem

• rem 彈性布局的核心在于根據視窗大小變化動態改變根元素的字體大小

優化方向

• 給根元素的字體大小設置隨著視窗變化而變化的 vw 單位，這樣就可以實現動態改變其大小
• 其他元素的文本字號大小、布局高寬、間距、留白都使用 rem 單位
• 限制根元素字體大小的最大最小值，配合 body 加上最大寬度和最小寬度，實現布局寬度的最大最小限制

// rem 單位換算：定為 75px 只是方便運算，750px-75px、640-64px、1080px-108px，如此類推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基準值
@function rem($px) {
     @return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 單位
$vw_design: 750;
html {
    font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; 
    // 同時，通過Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小寬度限制，避免默認100%寬度的 block 元素跟隨 body 而過大過小
body {
    max-width: 540px;
    min-width: 320px;
}

體驗地址

• https://jdc.jd.com/demo/ting/vw_rem_layout.html
• Mozilla《Length》
• 凹凸實驗室 《利用視口單位實現適配布局》