成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS || 響應(yīng)式網(wǎng)格

warmcheng / 516人閱讀

摘要：響應(yīng)式網(wǎng)格系統(tǒng)網(wǎng)格布局的作用在于更有效控制元素在網(wǎng)頁(yè)中所占比例的大小。使用清除浮動(dòng)的方式確保每個(gè)行元素保持在行元素中確保元素內(nèi)的元素不會(huì)溢出到其他行是網(wǎng)格系統(tǒng)中最復(fù)雜的部分，包括列元素定位方式，列元素寬度和響應(yīng)式設(shè)計(jì)需要。

響應(yīng)式網(wǎng)格系統(tǒng) 
網(wǎng)格布局的作用在于更有效控制元素在網(wǎng)頁(yè)中所占比例的大小。


比如，博客的留言板塊：在屏幕較大時(shí)，占據(jù)屏幕25%的寬度，出現(xiàn)在博客文章右側(cè)；在屏幕較小時(shí)，占據(jù)屏幕100%寬度，出現(xiàn)在博客文章的下側(cè)


網(wǎng)格布局是一種實(shí)現(xiàn)這種布局需求的方法：將所有寬度分為固定的欄（列）數(shù)，從而更高效控制元素寬度
1 基本的網(wǎng)格系統(tǒng) 
基本的網(wǎng)格系統(tǒng)包括：容器container、行元素rows、列元素columns和間隙gutter

1.1 container 
container的作用：設(shè)置整個(gè)網(wǎng)格的寬度。容器的寬度一般為100%，可以設(shè)置一個(gè)max-width
.grid-container {
    width: 100%;
    max-width: 1200px;    /* 可選 */
}

1.2 rows 
rows的作用：保持列元素column不會(huì)溢出到其他行。使用清除浮動(dòng)的方式確保每個(gè)行元素保持在行元素中
/* 確保row元素內(nèi)的column元素不會(huì)溢出到其他行 */
.row::after,
.row::before {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}
1.3columns 
column是網(wǎng)格系統(tǒng)中最復(fù)雜的部分，包括列元素定位方式，列元素寬度和響應(yīng)式設(shè)計(jì)需要。
列元素定位

float、display:inline-block;、display:table;和display:flex;均可實(shí)現(xiàn)列元素定位。先使用float：最常用的并且容易出錯(cuò)。

如果列元素是空的，浮動(dòng)的列元素會(huì)堆在其他元素的頂部。為列元素設(shè)置最小高度1px可以避免

[class*="col-"] {
    float: left;
    min-width: 1px;
}
列元素寬度

列元素的寬度通過(guò)容器寬度/列數(shù)計(jì)算而來(lái)。容器寬度設(shè)置為100%，需要分成6列時(shí)，每列的寬度16.66%。

[class*="col-"] {
    float: left;
    min-width: 1px;
    width: 16.66%;
}

如果要設(shè)置兩列元素的寬的一個(gè)section，需要?jiǎng)?chuàng)建一個(gè)2倍寬的列元素:通過(guò)組合，可以創(chuàng)建出多種寬度

只需要考慮使用列元素組合時(shí)，任何一行中列元素增加到6個(gè)時(shí)的情況

/* 組合多列的寬度 */
  .col-1 {
    width: 16.66%;
}
.col-2 {
    width: 33.33%;
}
.col-3 {
    width: 50%;
}
.col-4 {
    width: 66.664%;
}
.col-5 {
    width: 83.33%;
}
.col-6 {
    width: 100%;
}

列間距Gutter

使用border-box為設(shè)置百分比寬度的元素設(shè)置固定padding。使用border-box模型可以很輕松創(chuàng)建列寬

.grid-container {
    width: 100%;
    max-width: 1200px;     
    box-sizing: border-box;   /* 需要在百分比寬度中使用固定的padding值 */
}

[class*="col-"] {
    float: left;
    min-width: 1px;
    width: 16.66%;
    /* 設(shè)置列間距 */
    padding: 12px;
}

1.4 總結(jié) 
到此已經(jīng)完成了一個(gè)基礎(chǔ)的網(wǎng)格布局系統(tǒng)，可以簡(jiǎn)單使用。


    

        
col-1

        
col-1

        
col-1

        
col-1

        
col-1

        
col-1

    

    

        
col-2
 
        
col-2
 
        
col-2
 
    
 
    

        
col-3
 
        
col-3
2 實(shí)現(xiàn)響應(yīng)式 
只需要調(diào)整列元素寬度，便可以調(diào)整網(wǎng)頁(yè)布局適配移動(dòng)端。

屏幕寬度小于800px時(shí)，列寬變?yōu)樵瓉?lái)的2倍。

問(wèn)題：col-4、col-5和col-6的寬度會(huì)超過(guò)100%，需要將其顯示設(shè)置為100%。

并且col-1出現(xiàn)在col-5之后時(shí)：需要將其寬度設(shè)置為100%

col-2出現(xiàn)在最后一個(gè)元素時(shí)：需要將其寬度設(shè)置為100%

使用媒體查詢來(lái)解決不同尺寸屏幕應(yīng)用不同樣式

不處理col-1、col-2時(shí)

所以需要處理兩種特殊情況:

col-1出現(xiàn)在col-5后；.row .col-2:last-of-type{ width: 100%; }

col-2出現(xiàn)在最后后；.row .col-5 ~ .col-1{ width: 100%; }

@media all and (max-width: 800px) {
    .col-1 {
    width: 33.33%;
    }
    .col-2 {
        width: 50%;
    }
    .col-3 {
        width: 83.33%;
    }
    .col-4 {
        width: 100%;
    }
    .col-5 {
        width: 100%;
    }
    .col-6 {
        width: 100%;
    }

    /* .row .col-2:last-of-type{
         width: 100%; 
    }
    .row .col-5 ~ .col-1{
        width: 100%; 
    } */
}


元素寬度顯著小于800px時(shí)，可以讓除了col-1之外的元素都為100%寬 
@media all and (max-width:650px){
        .col-1{ width: 50%;}
        .col-2{ width: 100%;}
        .col-3{ width: 100%;}
        .col-4{ width: 100%;}
        .col-5{ width: 100%;}
        .col-6{ width: 100%;}
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111784.html

相關(guān)文章

  • CSS基礎(chǔ)篇--快速使用CSS Grid布局，實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)

    摘要：的個(gè)值表示三列，相應(yīng)的數(shù)值表示列寬即都為。嘗試其它布局把移到右邊實(shí)現(xiàn)后的效果使用點(diǎn)來(lái)創(chuàng)建空白的網(wǎng)格單元格實(shí)現(xiàn)效果真正的響應(yīng)式布局假設(shè)你想在移動(dòng)設(shè)備上查看的是標(biāo)題旁邊是菜單。 常用Grid布局屬性介紹 下面從一個(gè)簡(jiǎn)單Grid布局例子說(shuō)起。 CSS Grid 布局由兩個(gè)核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實(shí)際的 grid(網(wǎng)格)，items...

    cjie 評(píng)論0 收藏0

  • 創(chuàng)建自己的 CSS 網(wǎng)格系統(tǒng)【轉(zhuǎn)載 | 譯】

    摘要：為了防止這種情況，給提供的最小高度并使它們浮動(dòng)?；揪W(wǎng)格準(zhǔn)備好了一些額外的列內(nèi)容樣式使我們的網(wǎng)格系統(tǒng)響應(yīng)調(diào)整我們的網(wǎng)格以實(shí)現(xiàn)移動(dòng)布局非常簡(jiǎn)單。注意本指南只是創(chuàng)建自己響應(yīng)式網(wǎng)格系統(tǒng)的起點(diǎn)。 此文翻譯自 Creating Your Own CSS Grid System | Jan，英文不好如有錯(cuò)誤 ? ，請(qǐng)指正。 CSS 網(wǎng)格已經(jīng)存在很長(zhǎng)時(shí)間了。它們通常捆綁在 Bootstrap 等框架...

    gecko23 評(píng)論0 收藏0

  • CSS Grid布局，實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)

    摘要：效果如圖響應(yīng)式布局例子實(shí)現(xiàn)如圖效果結(jié)構(gòu)布局使用屬性創(chuàng)建一個(gè)列的網(wǎng)格，每個(gè)列都是一個(gè)單位寬度總寬度的。嘗試其它布局把移到右邊實(shí)現(xiàn)后的效果使用點(diǎn)來(lái)創(chuàng)建空白的網(wǎng)格單元格實(shí)現(xiàn)效果真正的響應(yīng)式布局假設(shè)你想在移動(dòng)設(shè)備上查看的是標(biāo)題旁邊是菜單。columns(列) 和 rows(行) 為了使其成為二維的網(wǎng)格容器，我們需要定義列和行。讓我們創(chuàng)建3列和2行。我們將使用grid-template-row和gri...

    pakolagij 評(píng)論0 收藏0

  • 一行css代碼搞定響應(yīng)式布局

    摘要：最精彩的地方在于所有的響應(yīng)特性被添加到了一行代碼中。基礎(chǔ)響應(yīng)單位柵格布局帶來(lái)了一個(gè)全新的值單位，單位通常簡(jiǎn)寫(xiě)為，它允許你根據(jù)需要將容器拆分為多個(gè)塊。 原文地址: https://medium.com/free-code-...原文作者: Per Harald Borgen 翻譯作者: hanxiansen showImg(https://segmentfault.com/img/re...

    appetizerio 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<