響應(yīng)式頁面

• 利用一套代碼實(shí)現(xiàn)頁面的布局和排版以適配不同分辨率的設(shè)備

兩大問題

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

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

使用 Media Queries

• Media Queries 是為指定特性的瀏覽器視窗應(yīng)用指定樣式【CSS 樣式的過濾器或攔截器】
• 「@media 規(guī)則」結(jié)合「6 個(gè)查詢參數(shù)」來攔截設(shè)備的瀏覽器特性（如顯示類型姐扮、視窗高度漂问、視窗寬度、橫豎屏等）且轨。

6 個(gè)參數(shù)

用法

• link

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

• 在 style 標(biāo)簽或 樣式文件內(nèi)使用 @media 規(guī)則

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

樣式斷點(diǎn)

Bulma

• 代碼示例

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

在線示例（Media Queries)

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

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

1速客、引入viewport meta標(biāo)簽

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

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

2、使用單位

僅使用 vw 作為 CSS 長度單位

• 利用 Sass 函數(shù)將設(shè)計(jì)稿元素尺寸的像素單位轉(zhuǎn)換為 vw 單位

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

• 無論是文本字號(hào)大小還是布局高寬五鲫、間距溺职、留白等都使用 vw 作為 CSS 單位

.mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vw(15) vw(10) vw(10); // 內(nèi)間距
        &_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 實(shí)現(xiàn)

.mod_grid {
    position: relative;
    &::after {
        // 實(shí)現(xiàn)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%;
        }
    }
    ...
}

• 對于需要保持高寬比的圖位喂，應(yīng)改用 padding-top 實(shí)現(xiàn)

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

在線體驗(yàn)

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

vw 搭配 rem

• rem 彈性布局的核心在于根據(jù)視窗大小變化動(dòng)態(tài)改變根元素的字體大小

優(yōu)化方向

• 給根元素的字體大小設(shè)置隨著視窗變化而變化的 vw 單位浪耘，這樣就可以實(shí)現(xiàn)動(dòng)態(tài)改變其大小
• 其他元素的文本字號(hào)大小、布局高寬塑崖、間距七冲、留白都使用 rem 單位
• 限制根元素字體大小的最大最小值，配合 body 加上最大寬度和最小寬度规婆，實(shí)現(xiàn)布局寬度的最大最小限制

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

體驗(yàn)地址

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