拿到 UI 時，前端人該如何思考？

做者：Ishadeed
譯者：前端小智
來源: ishadeed

點贊再看，微信搜索 【大遷世界】關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。**

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。

github 地址：https://github.com/qq44924588...

雙12阿里服務器27塊，通用點擊這裏購買能夠找我返現30，等於27塊就能買到了，只限新用戶，能夠用家人的手機號購買！

常常有人私信我，小智這個設計圖用 CSS 要怎麼佈局呀，這個按鈕要怎麼畫的。因此今天，在這篇文章咱們來介紹一些新的佈局的方法，但願對智米們有些用處。

把設計細節放在一邊

我一般作的第一件事就是把設計細節放在一邊。我想先知道此次設計主要包括哪些部分，而後在關注每一個部分的細節。考慮如下UI：

在上面UI中，有如下特色：

• Header/Navigation
• 中間內容 部分
• 底部的 How it works 部分

接着，咱們先把這三個主要部分抽象出來：

抽象後，咱們能夠看到主要的部分，主宋就能夠幫助咱們考慮如何佈局組件，而不用考慮每一個組件的細節。

我是這樣想的：

• Full-width header：頭部的導航欄
• Centered Content：中間內容水平居中，注意，這個通常須要設置最大寬度 max-width。
• How it works：這是一個4列的佈局，整個部分都被限制在一個包裝器中。

接着，把上面三個部分用代碼表示出來：

<header></header>

<section class="hero">
  <!-- A div to constraint the content -->
  <div class="hero__content"></div>
</section>

<div class="wrapper">
  <!-- 4-columns layout -->
  <section class="grid-4"></section>
</div>

由於咱們有一個4列的部分，這裏我使用 CSS網格：

.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 時，咱們不是立刻就開始行動，而是要觀察總體的構成，先實現每塊的構成，而後再去深刻構成的實現。

文章頁面

在本例中，咱們有一個文章頁面佈局。這是UI，它包含:

• 頭部
• 圖片
• 文章標題
• 文章內容
• 側邊欄（旁邊）

咱們再一次把它抽象成主要的幾個部分：

抽象主要包括幾個部分：

• 網站的頭部寬度是 100%
• 標題：包含文章標題和說明，其內容左對齊，要設置最大寬度
• 兩列布局，包含main和sidebar元素。
• 文章內容，水平居中並有最大寬度。

文章-頁面標題

這裏不須要什麼佈局方法。一個簡單的max-width就能夠了，固然還須要加些 padding，增長一些溫馨距離。

.page-header {
  max-width: 50rem;
  padding: 2rem 1rem;
}

文章- Main 和 Sidebar

main 元素是視口的整個寬度減去側邊欄的寬度。 一般，側邊欄應具備固定的寬度。 爲此，使用CSS網格是完美的。

.page-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  grid-template-columns: 1fr 250px;
}

對於文章的內部內容，應該將其限制在一個包裝器中。

.inner-content {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

有些總體的佈局後，咱們來看具體的細節。

深刻細節

How It Works 部分

在本文的第一個示例中，咱們來看一下 How It Works 部分 的細節實現。

列

• 這裏的步驟一，二，三，有沒有可能會增長或者減小的狀況，若是有，咱們應該如何處理？
• 咱們是否須要列的高度相等，特別是當一個卡片有一個很長的文本？

標題

咱們是否須要該部分標題留在一邊？ 仍是在某些狀況下應採用全寬？

響應式設計

當網頁寬度縮小時，咱們須要作響應式嗎？ 若是有, 那觸發的條件是什麼？

這些是咱們開發可能會遇到的問題，你以爲怎麼樣?做爲一名前端開發人員，咱們應該考慮這樣的邊緣狀況，而不只僅按 UI 照貓畫虎這樣簡單。

因爲本文着重於思考過程，因此沒法詳細介紹一個個有可能出現的狀況。

在上面的模型的第一個和第三個版本中，步驟數分別是3和2。咱們可使CSS動態化來處理嗎？ 能夠。

HTML

<div class="wrapper">
  <section class="steps">
    <div>
      <h2>How it works</h2>
      <p>Easy and simple steps</p>
    </div>
    <div class="layout">
      <div class="layout__item">
        <article class="card"></article>
      </div>
      <div class="layout__item">
        <article class="card"></article>
      </div>
      <div class="layout__item">
        <article class="card"></article>
      </div>
    </div>
  </section>
</div>

CSS

.steps {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

@media (min-width: 700px) {
  .steps {
    grid-template-columns: 250px 1fr;
  }
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

@media (min-width: 200px) {
  .layout {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

我使用了CSS grid minmax()和auto-fit關鍵字。 這在卡片數量能夠增長或減小的狀況下頗有用。

內容部分

圖片

• 圖片應如何呈現？ 它是天天變化的仍是應該從CMS更新？
• 是使用HTML <img>仍是CSS background？
• 圖片的預期長寬比是多少？
• 咱們是否須要根據視口大小使用多個圖像大小？
• 圖片的部分是否可能會換成視頻？

高度

內容最小高度是多少？

內容長度

咱們須要設置標題和描述的最大長度嗎?若是是，設計指望處理的最小值和最大值是多少？

元素之間的間距

如何處理垂直間距？

內容中心

如何水平和垂直居中內容?已知咱們只知道寬度，而高度是未知的。

限制內容

爲了提升可讀性，最好限制內容。 理想的寬度是多少？

響應式設計

咱們須要根據視窗寬度改變字體大小嗎?若是是，咱們應該使用基於px的單位，視口單位，或CSS clamp()函數?

根據咱們所作的項目的性質，咱們應該找到這些問題的答案，這將幫助咱們肯定組件的構建方式。

有時，很難回答每一個問題，可是問得越多，得到良好的無錯誤結果的可能性就越大。

在本部分中，我將解決子元素之間的間距。 我喜歡使用flow-space實用程序。 我是從Andy Bell的Piccalil博客中學到的。 目的是在直接同級元素之間提供間距。

html

<section class="hero">
  <!-- A div to constraint the content -->
  <div class="hero__content flow">
    <h2>Food is amazing</h2>
    <p>Learn how to cook amazing meals with easy and simple to follow steps</p>
    <a href="/learn">Learn now</a>
  </div>
</section>

css

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

最後的想法

如前面所見，實現組件的過程不只要使其與 UI 徹底匹配，還要考慮邊緣狀況。 但願智米從本文中學到至少一件事。

我是小智，咱們下期再見！

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文:https://ishadeed.com/article/...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。