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

資訊專欄INFORMATION COLUMN

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

appetizerio / 929人閱讀

摘要：最精彩的地方在于所有的響應(yīng)特性被添加到了一行代碼中?；A(chǔ)響應(yīng)單位柵格布局帶來了一個(gè)全新的值單位，單位通常簡(jiǎn)寫為，它允許你根據(jù)需要將容器拆分為多個(gè)塊。

原文地址: https://medium.com/free-code-...
原文作者: Per Harald Borgen


翻譯作者: hanxiansen


在這篇文章中，我將教你如何使用 CSS Grid 來創(chuàng)建一個(gè)超酷的圖像網(wǎng)格圖，它將根據(jù)屏幕的寬度來改變列的數(shù)量。最精彩的地方在于：所有的響應(yīng)特性被添加到了一行 css 代碼中。這意味著我們不必將 HTML 與丑陋的類名(如col-sm-4, col-md-8)混雜在一起，也不必為每個(gè)屏幕創(chuàng)建媒體查詢。ok，讓我們發(fā)車吧。

設(shè)置

在本文中，我將繼續(xù)使用我在第一篇 CSS Grid 布局教程文章中的網(wǎng)格布局。然后，我們將在文章末尾添加圖片。下面是我們初始化網(wǎng)格的外觀：

HTML 代碼：


  
1

  
2

  
3

  
4

  
5

  
6

CSS 代碼：

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}
注意: 示例中有一些基礎(chǔ)的樣式，但我在這里沒有寫出來，因?yàn)檫@對(duì) CSS 網(wǎng)格布局沒有任何影響

如果這段代碼讓你感到困惑，我建議你去好好讀下我的這篇文章Learn CSS Grid in 5 minutes ，其中就詳細(xì)的解釋了布局的基礎(chǔ)知識(shí)。

讓我們讓列開始具有自適應(yīng)特性吧。

基礎(chǔ)響應(yīng)單位: fraction

CSS 柵格布局帶來了一個(gè)全新的值:fraction單位，fraction單位通常簡(jiǎn)寫為fr，它允許你根據(jù)需要將容器拆分為多個(gè)塊。

讓我們將每一列更改為一個(gè) fraction 單位寬:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px;
}

結(jié)果是柵格布局將會(huì)把整個(gè)寬度分成三個(gè) fraction，每列占據(jù)一個(gè) fraction 單位，效果如下：

如果我們將grid-template-columns的值更改為1fr 2fr 1fr，第二列的寬度將會(huì)是其它兩列的兩倍。總寬現(xiàn)在是四個(gè) fraction 單位，第二列占據(jù)兩個(gè) fraction 單位，其它列各占一個(gè) fraction。效果如下：

總的來說，fraction 單位值將使你可以很容易的更改列的寬度。

高級(jí)響應(yīng)

然而，上面列子并沒有給出我們想要的響應(yīng)性，因?yàn)榫W(wǎng)格總是三列寬。我們希望網(wǎng)格能根據(jù)容器的寬度改變列的數(shù)量。要做到這一點(diǎn)，你必須學(xué)習(xí)如下三個(gè)概念：

repeat()

首先我們學(xué)習(xí)repeat()函數(shù)。這是一個(gè)強(qiáng)大的指定列和行的方法。讓我們使用repeat()函數(shù)來更改網(wǎng)格:

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
}

在上面代碼中，repeat(3, 100px)等于100px 100px 100px。第一個(gè)參數(shù)指定行與列的數(shù)量，第二個(gè)參數(shù)指定它們的寬度，因此它將為我們提供與開始時(shí)完全相同的布局：

auto-fit

然后是auto-fit。讓我們跳過固定數(shù)量的列，將3替換為自適應(yīng)數(shù)量：

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);
}

效果如下:

現(xiàn)在，柵格將會(huì)根據(jù)容器的寬度調(diào)整其數(shù)量。它會(huì)嘗試在容器中容納盡可能多的 100px 寬的列。但如果我們將所有列硬寫為 100px，我們將永遠(yuǎn)沒法獲得所需的彈性，因?yàn)樗鼈兒茈y填充整個(gè)寬度。正如你在上圖看到的，網(wǎng)格通常在右側(cè)留有空白。

minmax()

為了解決上述問題，我們需要minmax()。我們將 100px 替換為 minmax(100px, 1fr)，代碼如下：

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);
}
請(qǐng)注意，所有響應(yīng)都發(fā)生在一行 css 代碼中

效果如下：

正如你所見，效果完美。minmax()函數(shù)定義的范圍大于或等于 min， 小于或等于 max。

因此，現(xiàn)在每列將至少為 100px。但如果有更多的可用空間，柵格布局將簡(jiǎn)單地將其均分給每列，因?yàn)檫@些列變成了 fraction 單位，而不是 100px。

添加圖片

最后一步是添加圖片。這與 CSS Grid 布局無關(guān)，但讓我們看下代碼。

我們?cè)诿總€(gè)網(wǎng)格中添加一個(gè)圖片標(biāo)簽：

為了使圖片適應(yīng)于每個(gè)條目，我們將其寬、高設(shè)置為與條目本身一樣，我們使用object-fit:cover。這將使圖片覆蓋它的整個(gè)容器，根據(jù)需要，瀏覽器將會(huì)對(duì)其進(jìn)行裁剪。

.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

效果如下：

ok！現(xiàn)在你已經(jīng)了解了 CSS Grid 布局中最復(fù)雜的概念之一了，請(qǐng)給自己一個(gè)贊吧。

瀏覽器兼容性

在結(jié)束本文前，我提下瀏覽器支持情況，在撰寫本文時(shí)，全球77%的網(wǎng)站將支持 CSS Grid，而且比例還在逐步攀升。

我想想2018將是 CSS 網(wǎng)格布局的元年。它將獲得突破，并成為前端開發(fā)者的必備技能，就像過去幾年 CSS Flexbox 布局發(fā)生的情況一樣。

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

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

相關(guān)文章

  • 《CSS世界》筆記一：流/元素/尺寸

    摘要：一流體布局引出的幾種網(wǎng)頁布局方式布局方式描述特點(diǎn)場(chǎng)景靜態(tài)布局，傳統(tǒng)設(shè)計(jì)，網(wǎng)頁上的所有元素的尺寸一律使用作為單位。世界中，提出了流體布局的概念所謂流體布局，指的是利用元素流的特性實(shí)現(xiàn)的各類布局效果。 下一篇：《CSS世界》筆記二：盒模型四大家族 寫在前面 初讀《CSS世界》還是在深圳，屬于換工作前的充能。那時(shí)候除了工作，其他時(shí)間基本都在這本書里了，因?yàn)樗拇_吸引人。之前看過《CSS揭密》...

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

  • 一行css代碼輕松實(shí)現(xiàn)前端響應(yīng)式布局（vw+rem）

    摘要：大家知道可以用來做響應(yīng)式布局，只是元素上的樣式需要根據(jù)屏幕寬度來指定。今天突然想到這個(gè)單位，發(fā)現(xiàn)用它來做響應(yīng)式布局實(shí)在太方便了。只需一行屏幕標(biāo)準(zhǔn)寬，全部寬度是，即也就是每像素。這個(gè)值也可根據(jù)自己需要調(diào)整數(shù)值。具體實(shí)現(xiàn)的完整代碼請(qǐng)參考 大家知道rem可以用來做響應(yīng)式布局，只是html元素上的font-size樣式需要根據(jù)屏幕寬度來指定。 之前有用@media媒體查詢，根據(jù)各種屏幕寬度寫h...

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

  • 前端入門24-響應(yīng)式布局（BootStrap）

    摘要：聲明聲明本篇內(nèi)容摘抄自以下兩個(gè)來源中文網(wǎng)感謝大佬們的分享。版本是全球最受歡迎的前端組件庫(kù)，用于開發(fā)響應(yīng)式布局移動(dòng)設(shè)備優(yōu)先的項(xiàng)目。官方示例官方示例版本，官方還沒有中文教程，的中文教程倒是很齊全了。聲明 本篇內(nèi)容摘抄自以下兩個(gè)來源： BootStrap中文網(wǎng) 感謝大佬們的分享。 正文-響應(yīng)式布局（BootStrap） 這次想來講講一個(gè)前端開發(fā)框架：BootStrap BootStrap 目前...

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

  • （轉(zhuǎn)） 響應(yīng)式和自適應(yīng)區(qū)別

    摘要：于是出現(xiàn)了一種新的布局方式寬度自適應(yīng)布局。下面再?gòu)闹庇^一點(diǎn)的來看，響應(yīng)式和自適應(yīng)的區(qū)別首先兩種方式解決問題的是不一樣的。響應(yīng)式的概念應(yīng)該覆蓋了自適應(yīng)，而且涵蓋的內(nèi)容更多。圖片的自適應(yīng)除了布局和文本，自適應(yīng)網(wǎng)頁設(shè)計(jì)還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。 自適應(yīng)的體驗(yàn)http://m.ctrip.com/html5/ 響應(yīng)式的體驗(yàn) http://segmentfault.com/ 整理了幾篇自適...

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

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

0條評(píng)論

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