拿到UI時(shí)，前端人該如何思考？
經(jīng)常有人私信我，小智這個(gè)設(shè)計(jì)圖用 CSS 要怎么布局呀，這個(gè)按鈕要怎么畫的。所以今天，在這篇文章我們來介紹一些新的布局的方法，希望對智米們有些用處。
創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的十載時(shí)間我們累計(jì)服務(wù)了上千家以及全國政企客戶，如成都花箱等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致夸獎(jiǎng)。
把設(shè)計(jì)細(xì)節(jié)放在一邊
我通常做的第一件事就是把設(shè)計(jì)細(xì)節(jié)放在一邊。我想先知道這次設(shè)計(jì)主要包括哪些部分，然后在關(guān)注每個(gè)部分的細(xì)節(jié)?？紤]以下UI：
在上面UI中，有以下特點(diǎn)：
- Header/Navigation
- 中間內(nèi)容 部分
- 底部的 How it works 部分
接著，我們先把這三個(gè)主要部分抽象出來：
抽象后，我們可以看到主要的部分，主宋就可以幫助我們考慮如何布局組件，而不用考慮每個(gè)組件的細(xì)節(jié)。
我是這樣想的：
- Full-width header：頭部的導(dǎo)航欄
- Centered Content：中間內(nèi)容水平居中，注意，這個(gè)一般需要設(shè)置最大寬度 max-width。
- How it works：這是一個(gè)4列的布局，整個(gè)部分都被限制在一個(gè)包裝器中。
接著，把上面三個(gè)部分用代碼表示出來：
-
-
-
-
-
因?yàn)槲覀冇幸粋€(gè)4列的部分，這里我使用 CSS網(wǎng)格：
- .wrapper {
- margin-left: auto;
- margin-right: auto;
- padding-left: 1rem;
- padding-right: 1rem;
- max-width: 1140px;
- }
-
- .hero__content {
- max-width: 700px;
- margin-left: auto;
- margin-right: auto;
- }
-
- .grid-4 {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- }
拿到 UI 時(shí)，我們不是馬上就開始行動(dòng)，而是要觀察整體的構(gòu)成，先實(shí)現(xiàn)每塊的構(gòu)成，然后再去深入構(gòu)成的實(shí)現(xiàn)。
文章頁面
在本例中，我們有一個(gè)文章頁面布局。這是UI，它包含:
- 頭部
- 圖片
- 文章標(biāo)題
- 文章內(nèi)容
- 側(cè)邊欄(旁邊)
我們再一次把它抽象成主要的幾個(gè)部分：
抽象主要包括幾個(gè)部分：
- 網(wǎng)站的頭部寬度是 100%
- 標(biāo)題：包含文章標(biāo)題和說明，其內(nèi)容左對齊，要設(shè)置最大寬度
- 兩列布局，包含main和sidebar元素。
- 文章內(nèi)容，水平居中并有最大寬度。
文章-頁面標(biāo)題
這里不需要什么布局方法。一個(gè)簡單的max-width就可以了，當(dāng)然還需要加些 padding，增加一些舒適距離。
- .page-header {
- max-width: 50rem;
- padding: 2rem 1rem;
- }
文章- Main 和 Sidebar
main 元素是視口的整個(gè)寬度減去側(cè)邊欄的寬度。通常，側(cè)邊欄應(yīng)具有固定的寬度。為此，使用CSS網(wǎng)格是完美的。
- .page-wrapper {
- display: grid;
- grid-template-columns: 1fr;
- }
-
- @media (min-width: 800px) {
- grid-template-columns: 1fr 250px;
- }
對于文章的內(nèi)部內(nèi)容，應(yīng)該將其限制在一個(gè)包裝器中。
- .inner-content {
- max-width: 50rem;
- margin-left: auto;
- margin-right: auto;
- padding-left: 1rem;
- padding-right: 1rem;
- }
有些整體的布局后，我們來看具體的細(xì)節(jié)。
深入細(xì)節(jié)
How It Works 部分
在本文的第一個(gè)示例中，我們來看一下 How It Works 部分 的細(xì)節(jié)實(shí)現(xiàn)。
列
- 這里的步驟一，二，三，有沒有可能會增加或者減少的情況，如果有，我們應(yīng)該如何處理?
- 我們是否需要列的高度相等，特別是當(dāng)一個(gè)卡片有一個(gè)很長的文本?
標(biāo)題
我們是否需要該部分標(biāo)題留在一邊?還是在某些情況下應(yīng)采用全寬?
響應(yīng)式設(shè)計(jì)
當(dāng)網(wǎng)頁寬度縮小時(shí)，我們需要做響應(yīng)式嗎?如果有, 那觸發(fā)的條件是什么?
這些是我們開發(fā)可能會遇到的問題，你覺得怎么樣?作為一名前端開發(fā)人員，我們應(yīng)該考慮這樣的邊緣情況，而不僅僅按 UI 照貓畫虎這樣簡單。
由于本文著重于思考過程，所以無法詳細(xì)介紹一個(gè)個(gè)有可能出現(xiàn)的情況。
在上面的模型的第一個(gè)和第三個(gè)版本中，步驟數(shù)分別是3和2。我們可以使CSS動(dòng)態(tài)化來處理嗎?可以。
HTML
-
-
-
-
How it works
-
Easy and simple steps
-
-
-
-
-
