拿到 UI 时，前端人该如何思考？

经常有人私信我，时前思考小智这个设计图用 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 还是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 完全匹配，还要考虑边缘情况。希望智米从本文中学到至少一件事。

本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。