【譯】如何編寫「移動端優先」CSS

時間 2019-11-13

標籤如何編寫移動優先 css 欄目無線简体版

原文原文鏈接

原文連接：https://zellwk.com/blog/how-to-write-mobile-first-css/css

構建響應式網站是現在前端開發者的必備技能，當咱們談到響應式網站時，「移動端優先」這個詞馬上就會出如今腦海中。

咱們知道從「移動端優先」這個角度開始設計很重要，但咱們不多談到使用「移動端優先」的方法來寫代碼。

今天，我想與你分享「移動端優先」添加樣式的方法，爲何這種方法更好，以及如何發揮它的魔力。

貼士：若是你在學習使用Susy來創建響應式佈局，這篇文章會對你幫助很是大。

#什麼是「移動端優先」和「桌面優先」方法？

在開始討論爲何「移動端優先」方法更好以前，咱們先了解下「移動端優先」與「桌面優先」之間的區別。

「移動端優先」添加樣式的方法指的是首先在移動設備上應用樣式，而後經過媒體查詢在樣式表中加入應用於大屏幕的高級樣式和其餘覆蓋樣式。

這個方法使用min-width媒體查詢。

這裏是一個簡單的例子：前端

// 這個樣式在0px到600px應用
body { background: red; }

// 這個樣式在大於600px時應用
@media (min-width: 600px) {
    body { background: green; }
}

在上面的例子中，當視口小於600px時，<body>的背景是紅色的，當視口等於或大於600px時，背景變成綠色。

另外一方面，「桌面優先」添加樣式的方法指的是首先在桌面設備上應用樣式，而後經過媒體查詢在樣式表中加入應用於小屏幕的高級樣式和其餘覆蓋樣式。

這個方法使用max-width媒體查詢。

這裏是一個簡單的例子：web

// 這個樣式在大於600px時應用
body { background: green; }

// 這個樣式在0px到600px應用
@media (max-width: 600px) {
    body { background: red; }
}

在任意寬度下，<body>會有一個綠色的背景，但當屏幕小於600px時，背景顏色會變成紅色。

#爲何要寫「移動端優先」代碼？

爲大屏幕編寫的代碼一般會比爲小屏幕編寫的代碼更復雜，因此編寫「移動端優先」代碼能夠簡化你的代碼。

設想這樣一個場景，你的網站有一個「內容-邊欄」佈局，.content在移動端佔會100%的寬度，在桌面則佔60%的寬度。

大部分狀況下，在小屏幕中，咱們能夠依賴默認屬性給內容應用樣式，在這個例子中，<div>的默認寬度爲100%。

若是咱們用的是「移動端優先」方法，Sass代碼會是這樣的：佈局

.content {
    // 爲小屏幕設置屬性
    // 這裏不須要設置任何屬性，由於咱們可使用默認樣式

    // 爲大屏幕設置屬性
    @media (min-width: 800px) {
        float: left;
        width: 60%;
    }
}

若是咱們用的是「桌面優先」的方法，大部分狀況下咱們須要爲小視口重寫默認樣式，Sass代碼會是這樣：學習

.content {
    // 爲大屏幕設置屬性
    float: left;
    width: 60%;

    // 爲小屏幕設置屬性
    // 注意咱們須要重寫兩個默認屬性才能使這個佈局正常顯示
    @media (max-width: 800px) {
        float: none;
        width: 100%;
    }
}

在這個例子中，咱們節省了兩行代碼以及幾秒鐘的思考時間（不用思考使人頭疼的CSS）。想象下若是你在創建一個更大的網站，這個方法會給你省下多少時間和努力。

大多數時候min-width查詢足夠幫助你寫一個網站，然而，在只使用min-width沒法知足需求的狀況下，min-width和max-width的結合使用可以幫助你減小麻煩。

讓咱們來研究一下這些狀況。

#使用「移動端優先」方法和max-width查詢

當你但願在小於特定視口大小時應用某樣式的時候，max-width查詢就能發揮它的做用了。min-width和max-width媒體查詢的結合使用則能夠在兩個不一樣視口大小間控制樣式。

設想一個縮略圖庫例子，在小視口中，這個圖庫每行顯示3個縮略圖，在大視口中，每行4個。

由於每一個縮略圖之間沒有間隔，因此代碼很簡單：

網站

.gallery__item {
    float: left;
    width: 33.33%;
    @media (min-width: 800px) {
        width: 25%;
    }
}

若是每一個縮略圖之間有空白間隔，狀況會變得稍複雜。

假設這些間隔佔整個寬度的5%：

spa

.gallery__item {
    float: left;
    width: 30%;
    margin-right: 5%;
    margin-bottom: 5%;
}

咱們還須要把每行最後的（第3個）縮略圖的margin-right設爲0，以避免它被推到下一行。

設計

.gallery__item {
    float: left;
    width: 30%;
    margin-right: 5%;
    margin-bottom: 5%;
    &:nth-child(3n) {
        margin-right: 0;
    }
}

當每行有4個縮略圖時也應該是這樣，但若是咱們仍是使用以前所用的min-width查詢.....

code

.gallery__item {
    float: left;
    width: 30%;
    margin-right: 5%;
    margin-bottom: 5%;
    &:nth-child(3n) {
        margin-right: 0;
    }

    @media (min-width: 800px) {
        width: 21.25%; // (100% - 15%) / 4
        &:nth-child(4n) {
            margin-right: 0;
        }
    }
}

狀況並不是預想中的那樣，這是由於咱們指定第3n（3的倍數）個縮略圖的margin-right爲0，因爲層疊效應，這個屬性在大視口中依然起做用，破壞了咱們的預想中的模式。

咱們能夠經過重設第3n（3的倍數）個縮略圖的margin-right爲5%這個方法來解決問題：

視頻

.gallery__item {
    // ...
    @media (min-width: 800px) {
        // ...
        &:nth-child(3n) {
            margin-right: 5%;
        }
        &:nth-child(4n) {
            margin-right: 0;
        }
    }
}

這個方法並非太好，由於若是咱們須要修改大視口中縮略圖的數量，咱們要重複margin-right: 5%;

咱們應該儘量使代碼保持DRY（Don't Repeat Yourself. 不要重複代碼。）。

更好的解決辦法是使用max-width查詢把選擇器nth-child(3n)限制在對應的視口中。

.gallery__item {
    float: left;
    margin-right: 5%;
    margin-bottom: 5%;
    @media (max-width: 800px) {
        width: 30%;
        &:nth-child(3n) {
            margin-right: 0;
        }
    }

    @media (min-width: 800px) {
        width: 21.25%; // (100% - 15%) / 4
        &:nth-child(4n) {
            margin-right: 0;
        }
    }
}

這個辦法能起做用是由於max-width屬性把選擇器限制在小於800px的視口中，其中定義的樣式不會影響其餘視口的樣式。

如今想象一下有一個更大的視口，你想要在圖庫中每行顯示5個縮略圖，這時候該min-width和max-width查詢聯手出動了。

.gallery__item {
    float: left;
    margin-right: 5%;
    margin-bottom: 5%;
    @media (max-width: 800px) {
        width: 30%;
        &:nth-child(3n) {
            margin-right: 0;
        }
    }

    // min-width和max-width查詢結合使用
    @media (min-width: 800px) and (max-width: 1200px) {
        width: 21.25%; // (100% - 15%) / 4
        &:nth-child(4n) {
            margin-right: 0;
        }
    }

    @media (min-width: 1200px) {
        width: 16%; // (100% - 20%) / 5
        &:nth-child(5n) {
            margin-right: 0;
        }
    }
}

#視頻！

Webucator上一羣很好的小夥子自願製做了一個視頻來總結這篇博客，因此若是你以爲視頻更適合你，必定要去看看他們的視頻。

#總結

創建響應式網站時，min-width媒體查詢很是有用，由於它減低了代碼複雜度。不過，從上面的例子中能夠看出，min-width查詢並不是全部問題的解決方案，有時在樣式表中使用max-width查詢也是有益的，它能幫助你保持代碼更DRY。