国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

柵格化系統(tǒng)的原理以及實(shí)現(xiàn)

weknow619 / 3050人閱讀

摘要：實(shí)現(xiàn)讓我們來(lái)親自實(shí)現(xiàn)一個(gè)柵格化系統(tǒng)，假設(shè)我們要將一行劃分為等分，那等分就占有的寬度。一個(gè)柵格化系統(tǒng)就這樣實(shí)現(xiàn)了。

更多技術(shù)文章 什么是柵格化

在一個(gè)有限的、固定的平面上，用水平線和垂直線（虛擬的線，“參考線”），將平面劃分成有規(guī)律的一系列“格子”（虛擬的格子），并依托這些格子、或以格子的邊線為基準(zhǔn)線，來(lái)進(jìn)行有規(guī)律的版面布局。

通俗點(diǎn)來(lái)說(shuō)，就是人為的把網(wǎng)頁(yè)中的一行，等比例劃分,比如將一行劃分為 12 等分。然后在每個(gè)格子里進(jìn)行頁(yè)面開發(fā)，這就柵格化。

原理

假如在頁(yè)面里定義了一個(gè) DIV，并設(shè)置如下 CSS 屬性：

div {
  border: 1px solid #ffffd;
  height: 200px;
  width: 100%;
}


頁(yè)面上將會(huì)展示一個(gè)帶有灰色邊框的，寬度 100% 的矩形。如果手動(dòng)控制瀏覽器放大縮小，此 DIV 也會(huì)相應(yīng)的放大縮小，但寬度始終是 100%。

如果在頁(yè)面定義了兩個(gè) DIV，并設(shè)置如下 CSS 屬性：

body {
    font-size: 0; // 將inline-block布局兩個(gè)DIV之間的距離清除
}
div {
    height: 200px;
    border: 1px solid #ffffd;
    width: 50%;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top; // 頂部對(duì)齊
}


頁(yè)面上將會(huì)有兩個(gè)寬度各占 50% 的 DIV，如果頁(yè)面放大或縮小，這兩個(gè) DIV 都會(huì)始終保持著頁(yè)面 50% 的寬度。

相信到這里，應(yīng)該有人看出來(lái)了，這就是柵格化，只不過(guò)第一個(gè)例子是將一行劃分為 1 等分，即只有一個(gè)格子。
第二個(gè)例子將一行劃分為 2 等分，即有兩個(gè)格子。如果我將一行劃分為 12 等分，那就跟 bootstrap 中的柵格化系統(tǒng)一模一樣了，有 12 個(gè)格子。

實(shí)現(xiàn)

讓我們來(lái)親自實(shí)現(xiàn)一個(gè)柵格化系統(tǒng)，假設(shè)我們要將一行劃分為 12 等分，那 1 等分就占有 100% / 12 = 8.33% 的寬度。

相應(yīng)的 CSS 可以這樣設(shè)置：

.col1  {width: 8.33%}
.col2  {width: 16.66%}
.col3  {width: 25%}
.col4  {width: 33.33%}
.col5  {width: 41.66%}
.col6  {width: 50%}
.col7  {width: 58.33%}
.col8  {width: 66.66%}
.col9  {width: 75%}
.col10 {width: 83.33%}
.col11 {width: 91.66%}
.col12 {width: 100%}

上一個(gè)完整的示例來(lái)看看吧：



    
    Title

最后呈現(xiàn)出來(lái)的效果是這樣的。

怎么樣？是不是很簡(jiǎn)單。

進(jìn)階

結(jié)合 @media 媒體查詢，我們可以做得更多。@media 詳情請(qǐng)看MDN

相信用過(guò) bootstrap 柵格化系統(tǒng)的都知道，在 bootstrap 柵格化系統(tǒng)中，有一些 col-md col-sm 屬性，它們是干什么用的呢？
其實(shí)，它們都是柵格化系統(tǒng)的 CSS 類名，只是針對(duì)了不同的屏幕寬度。

假如我們有這樣的一個(gè)需求：
在 PC 上，因?yàn)槠聊槐容^大，我們要求一行顯示 4 列的內(nèi)容。但是在手機(jī)上，因?yàn)槠聊槐容^小，要求一行顯示 3 列的內(nèi)容。
即一個(gè)網(wǎng)站同時(shí)適配 PC 和手機(jī)端，根據(jù)不同的端自動(dòng)調(diào)整頁(yè)面。

此時(shí)，我們可以這樣做：



    
    Title

一個(gè) DIV，同時(shí)設(shè)置兩個(gè)類名。當(dāng)屏幕 >=1200px 時(shí)，一行顯示 4 列，當(dāng)屏幕 <1200px 時(shí)，一行顯示3列，而且是瀏覽器自動(dòng)調(diào)整。

一個(gè)柵格化系統(tǒng)就這樣實(shí)現(xiàn)了。

練習(xí)任務(wù)

對(duì)于柵格化的介紹就到此結(jié)束了，但如果你看完文章后什么都不做，不到一周，就會(huì)把學(xué)到的知識(shí)忘得七七八八，為了幫助你鞏固知識(shí)，特地布置了一個(gè)小任務(wù)，按要求實(shí)現(xiàn)如下頁(yè)面：

圖一

圖二

任務(wù)要求：

當(dāng)頁(yè)面大于 768px 時(shí)，頁(yè)面如圖1所示。

當(dāng)頁(yè)面小于等于 768px 時(shí)， 頁(yè)面如圖2所示。

這里是答案和在線DEMO，但是最好先試試能不能自己做出來(lái)，如果實(shí)在做不出來(lái)，再看答案。

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

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

相關(guān)文章

  • 柵格化系統(tǒng)的原理以及實(shí)現(xiàn)

    摘要：實(shí)現(xiàn)讓我們來(lái)親自實(shí)現(xiàn)一個(gè)柵格化系統(tǒng)，假設(shè)我們要將一行劃分為等分，那等分就占有的寬度。一個(gè)柵格化系統(tǒng)就這樣實(shí)現(xiàn)了。 更多技術(shù)文章 什么是柵格化 在一個(gè)有限的、固定的平面上，用水平線和垂直線（虛擬的線，參考線），將平面劃分成有規(guī)律的一系列格子（虛擬的格子），并依托這些格子、或以格子的邊線為基準(zhǔn)線，來(lái)進(jìn)行有規(guī)律的版面布局。 通俗點(diǎn)來(lái)說(shuō)，就是人為的把網(wǎng)頁(yè)中的一行，等比例劃分,比如將一行劃分為 ...

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

  • Bootstrap網(wǎng)格系統(tǒng)

    摘要：柵格系統(tǒng)中的列是通過(guò)指定到的值來(lái)表示其跨越的范圍。實(shí)例下圖是一個(gè)柵格系統(tǒng)，共有四行。然后在根目錄中，使用命令，可以自動(dòng)將源代碼編譯成，放在目錄中。 什么是Bootstrap Bootstrap是一個(gè)用于快速開發(fā)Web應(yīng)用程序和網(wǎng)站的前端框架，它包括HTML,CSS,JS等。它是由Twitter開發(fā)，現(xiàn)在成為Github上最為流行的前端開發(fā)框架。它提供了一套響應(yīng)式，移動(dòng)設(shè)備優(yōu)先的流式柵格...

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

  • 你不需要基于 CSS Grid 的柵格布局系統(tǒng)

    摘要：在過(guò)去的幾個(gè)星期里，我開始看到基于的布局框架和柵格系統(tǒng)的出現(xiàn)。你可能傾向于明確給出所有元素的位置，或是盡可能依賴于自動(dòng)布局。 showImg(https://segmentfault.com/img/remote/1460000010188997); 在過(guò)去的幾個(gè)星期里，我開始看到基于 CSS Grid 的布局框架和柵格系統(tǒng)的出現(xiàn)。我們驚訝它為什么出現(xiàn)的這么晚。但除了使用 CSS Gr...

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

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

0條評(píng)論

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