拿到 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和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。