這篇文章將為大家詳細(xì)講解有關(guān)使用CSS怎么實(shí)現(xiàn)一個(gè)響應(yīng)式布局系統(tǒng)，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),長(zhǎng)清企業(yè)網(wǎng)站建設(shè),長(zhǎng)清品牌網(wǎng)站建設(shè),網(wǎng)站定制,長(zhǎng)清網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,長(zhǎng)清網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

什么是css

css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。

響應(yīng)式布局系統(tǒng)，在現(xiàn)在流行的 CSS 框架中已經(jīng)非常常見了。它主要由容器類和約定一行列數(shù)的柵格系統(tǒng)組成，組成了一個(gè)框架的骨架。

在流行的前端框架 Bootstrap 和 Bulma CSS 中，就有體現(xiàn)。像 Bootstrap 的 .container 、 .row 、 .col ；還有 Bulma CSS 的 .container 、 columns 、 column 都是表示這類布局系統(tǒng)。雖然名稱不一樣，但原理都是相同的。

隨著 Flex 布局的普及，幾乎現(xiàn)代的柵格系統(tǒng)的實(shí)現(xiàn)都選擇使用這一靈活的布局方式。

現(xiàn)在就來看一下，怎樣實(shí)現(xiàn)一個(gè)最小的 CSS 響應(yīng)式布局系統(tǒng)吧。

首先從容器說起。

為了保證實(shí)現(xiàn)代碼的簡(jiǎn)潔，本文將使用 SCSS 來寫。如果你對(duì) SCSS 還不熟悉，沒有關(guān)系，行文中會(huì)對(duì)使用到的知識(shí)點(diǎn)做介紹。

容器

容器主要用來包裹網(wǎng)頁(yè)的主要內(nèi)容，常見效果就是將內(nèi)容居中地顯示在屏幕中間。

我們使用 .container 來約定容器。

首先，容器是水平居中的，這一塊樣式較為容易：

.container {
    margin-left: auto;
    margin-right: auto;
}

所謂的響應(yīng)式容器，就是根據(jù)不同的斷點(diǎn)（breakpoints），也就是當(dāng)前的視口寬度，來決定容器使用的 max-width 值。

這里我們借鑒了 Bootstrap 中對(duì)斷點(diǎn)的定義，根據(jù)視口寬度，分為以下幾類設(shè)備：

[0, 576px)
[576px, 768px)
[768px, 992px)
[992px, 1200px)
[1200px, +∞)

針對(duì)斷點(diǎn)定義，聲明一個(gè)變量 $breakpoints ：

$breakpoints: (
    // Extra small screen / phone
    xs: 0,
    // Small screen / phone
    sm: 576px,
    // Medium screen / tablet
    md: 768px,
    // Large screen / desktop
    lg: 992px,
    // Extra large screen / wide desktop
    xl: 1200px
);

$breakpoints 稱為“列表”，是 SCSS 提供給我們的數(shù)據(jù)結(jié)構(gòu)。由一個(gè)個(gè) key: value 鍵值對(duì)組成。上例中的 key 表示的是設(shè)備有效范圍的起始點(diǎn)。

不同的設(shè)備下，容器有不同的 max-width 值。所以，這里我們?cè)俾暶饕粋€(gè)表示容器寬度的變量 $container-max-widths ：

$container-max-widths: (
    xs: none,
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px
);

這里的 $container-max-widths 也是個(gè)列表，這里的 key 表示某個(gè)設(shè)備下容器的較大寬度。比如，在超大屏設(shè)備下，容器的較大寬度是 1140px ，而在平常手機(jī)下，不設(shè)置容器的較大寬度，為默認(rèn)值 none 。

有了實(shí)現(xiàn)的思路，接下來就著手實(shí)現(xiàn)。

我們就可以借助媒體查詢指令 @media ，依據(jù)視口寬度的范圍，給予 .container 不同的 max-width 值。

@each $device, $breakpoint in $breakpoints {
    @media only screen and (min-width: $breakpoint) {
        .container {
            max-width: map-get($container-max-widths, $device);
        }
    }
}

7 行代碼搞定！

下面解釋下上面的代碼。

我們對(duì)列表遍歷，使用的是 @each...in 語法，每一次遍歷取出對(duì)應(yīng)的 key、value，得到當(dāng)前的 $device 、 $breakpoint 。 map-get 是 SCSS 提供的用來操作列表的方法：根據(jù) key 取出 value。比如，當(dāng) $device 值為 xs 的時(shí)候， map-get($container-max-widths, $device) 對(duì)應(yīng)值為 none ；當(dāng) $device 值為 sm 的時(shí)候， map-get($container-max-widths, $device) 對(duì)應(yīng)值為 540px ，以此類推。

@media only screen and (min-width: $breakpoint) { ... }中包含的代碼，表示從當(dāng)前設(shè)備斷點(diǎn)開始處，應(yīng)用的 CSS 樣式。 當(dāng)我們同時(shí)按照從小到大的順序設(shè)置兩個(gè)斷點(diǎn)的媒體查詢時(shí)，后者會(huì)覆蓋前者的樣式 ，這是實(shí)現(xiàn)不同視口下，具有不同寬度容器的核心原理。

接下來，將得到的寬度值賦給容器的 max-width 屬性就可以了。

到現(xiàn)在為止，我們就寫出了一個(gè)響應(yīng)式容器了，我們總攬下代碼：

$breakpoints: (
    // Extra small screen / phone
    xs: 0,
    // Small screen / phone
    sm: 576px,
    // Medium screen / tablet
    md: 768px,
    // Large screen / desktop
    lg: 992px,
    // Extra large screen / wide desktop
    xl: 1200px
);
$container-max-widths: (
    xs: none,
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px
);
.container {
    margin-left: auto;
    margin-right: auto;
}
@each $device, $breakpoint in $breakpoints {
    @media only screen and (min-width: $breakpoint) {
        .container {
            max-width: map-get($container-max-widths, $device);
        }
    }
}

點(diǎn)擊這里，查看效果。

下面再來介紹 12 列柵格布局。

12 列柵格布局

先使用 Flex 布局，寫一個(gè)最簡(jiǎn)的等寬布局。

.row {
    display: flex;
    
    .col {
        flex-grow: 1;
        flex-basis: 0;
    }
}

沒錯(cuò)，這就是使用 Flex 布局實(shí)現(xiàn)一個(gè)等寬布局的所有代碼了。如果不考慮中間的空白行，只需要 7 行代碼。

這里的原理是，我們將所有 Flex 項(xiàng)目的 flex-basis 設(shè)置為 0 了，就是說這些 Flex 項(xiàng)目在 grow 或 shrink 之前都沒有寬度，是一樣長(zhǎng)的。這樣最終計(jì)算出來的主軸空間會(huì)平均地分配給了每個(gè) Flex 項(xiàng)目，這樣它們就等寬了。

到這里，我們所寫的這個(gè)簡(jiǎn)易柵格布局有兩個(gè)局限：

1.不能布局非等寬項(xiàng)目。
2.不支持換行。

換行的話很好弄，為 Flex 容器加個(gè) flex-wrap: wrap 就可以了。那怎樣處理“非等寬項(xiàng)目”排列布局呢。

為了能實(shí)現(xiàn)非等寬項(xiàng)目的布局，我們的思路是：  禁用 Flex 項(xiàng)目的伸縮特性，使用百分比 width 指定寬度  。

首先，禁用 Flex 項(xiàng)目的伸縮特性，使用到的屬性如下：

flex-shrink: 0;
flex-grow: 0;
flex-basis: 0;

這三個(gè)屬性等價(jià)的快捷寫法是：

flex: none;

然后就是使用百分比 width 指定寬度了。

我們實(shí)現(xiàn)的是一行最多 12 列的柵格布局。也就是說把一行劃分成 12 列，每一列的寬度大約占總寬度的 8.33% 。我們用 .is-列數(shù) 指定一個(gè)項(xiàng)目占據(jù)的列數(shù)：

.is-1
.is-2
.is-3
.is-4
.is-5
.is-6
.is-7
.is-8
.is-9
.is-10
.is-11
.is-12

根據(jù)這個(gè)規(guī)律，我們可以很容易地寫出柵格布局代碼：

$columns: 12;

.row {
    display: flex;
    
    .col {
        flex-grow: 1;
        flex-basis: 0;
        
        @for $i from 1 through 12 {
            &.is-#{$i} {
                flex: none;
                width: percentage($i / 12);
            }
        }
    }
}

這里我們使用 @for 指令的 @for $var from through 語法，從 1 遞增到 12，定義了 .is-* 這一系列類名，原理就是我們說過的禁用了 Flex 項(xiàng)目的伸縮特性，指定給它百分比寬度。怎么樣，很簡(jiǎn)單吧。

接下來再加上折行（.row.is-multiline）和 Flex 項(xiàng)目偏移（ .is-offset-*）的支持。

我們總攬下代碼：

$columns: 12;

.row {
    display: flex;
    
    &.is-multiline {
        flex-wrap: wrap;   
    }
    
    .col {
        flex-grow: 1;
        flex-basis: 0;
        
        @for $i from 1 through 12 {
            &.is-#{$i} {
                flex: none;
                width: percentage($i / 12);
            }
            &.is-offset-#{$i} {
                margin-left: percentage($i / 12);
            }
        }
    }
}

.is-multiline 是跟隨 .row 一起使用的，得到的就是 flex-wrap: wrap 的效果；項(xiàng)目偏移則借助 margin-left
屬性實(shí)現(xiàn)。

到這里，我們的 12 列柵格布局就寫完了 ヾ(?°∇°?)??

完整代碼

我們把上面兩部分的代碼整合起來，就能得到一個(gè)最小的響應(yīng)式布局系統(tǒng)了~ O(∩_∩)O

$breakpoints: (
    // Extra small screen / phone
    xs: 0,
    // Small screen / phone
    sm: 576px,
    // Medium screen / tablet
    md: 768px,
    // Large screen / desktop
    lg: 992px,
    // Extra large screen / wide desktop
    xl: 1200px
);
$container-max-widths: (
    xs: none,
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px
);
.container {
    margin-left: auto;
    margin-right: auto;
}
@each $device, $breakpoint in $breakpoints {
    @media only screen and (min-width: $breakpoint) {
        .container {
            max-width: map-get($container-max-widths, $device);
        }
    }
}
$columns: 12;
.row {
    display: flex;
    &.is-multiline {
        flex-wrap: wrap;   
    }
    .col {
        flex-grow: 1;
        flex-basis: 0;
        @for $i from 1 through 12 {
            &.is-#{$i} {
                flex: none;
                width: percentage($i / 12);
            }
            &.is-offset-#{$i} {
                margin-left: percentage($i / 12);
            }
        }
    }
}

關(guān)于使用CSS怎么實(shí)現(xiàn)一個(gè)響應(yīng)式布局系統(tǒng)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章標(biāo)題：使用CSS怎么實(shí)現(xiàn)一個(gè)響應(yīng)式布局系統(tǒng)-創(chuàng)新互聯(lián)
URL鏈接：http://m.jcarcd.cn/article/cepdeo.html