关于前端:拿到-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 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。