拿到UI的时候，前端人应该怎么想？
时间：2023-03-18 00:11:54
科技观察
经常有人私信我，问小智的设计怎么用CSS布局，这个按钮怎么画。所以今天在这篇文章中，我们将介绍一些新的布局方式，希望对智米有用。把设计细节放在一边我通常做的第一件事就是把设计细节放在一边。我想知道这个设计的主要部分是什么，然后关注每个部分的细节。考虑以下UI：在上面的UI中，有以下功能：Header/NavigationHowitworkssection位于中间内容部分的底部接下来，我们首先抽象这三个主要部分：抽象之后，我们可以看到主要的Song可以帮助我们思考如何布局组件，而不必考虑每个组件的细节。下面是我的想法：Full-widthheader:header的导航栏CenteredContent:中间内容水平居中。请注意，这通常需要设置最大宽度max-width。工作原理：这是一个4列布局，整个部分都被限制在一个包装器中。接下来将以上三部分用代码表达出来："wrapper">
因为我们有一个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，包括：HeaderimageArticletitle文章内容Sidebar(beside)我们把它再次抽象成主要部分：抽象主要包括几个部分：网站的headerwidth100%Title：包含标题和描述文章，其内容是左对齐的。要设置最大宽度的两列布局，它包含主要元素和侧边栏元素。文章内容，水平居中并有最大宽度。文章-页面标题这里不需要任何布局方法。一个简单的max-width就足够了，当然，还需要一些padding来增加舒适的距离。.page-header{max-width:50rem;padding:2rem1rem;}Article-Main和Sidebarmain元素是视口的整个宽度减去侧边栏的宽度。一般来说，侧边栏应该有一个固定的宽度。为此，使用CSSGrid是完美的。.page-wrapper{display:grid;grid-template-columns:1fr;}@media(min-width:800px){grid-template-columns:1fr250px;}对于文章的内部内容，应该限于一个包装器。.inner-content{max-width:50rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;}在整体布局了一番之后，我们来看一下具体细节。深入了解“工作原理”部分的细节在本文的第一个示例中，让我们看一下“工作原理”部分的详细实现。这里的第1、2、3步，有没有可能会增加或减少的情况，如果有，应该怎么处理？我们是否需要列的高度相等，特别是当卡片有很长的文本时？标题我们是否需要将章节标题放在一边？或者在某些情况下它应该是全宽的吗？响应式设计当网页宽度缩小时，我们需要做响应式设计吗？如果是这样，什么触发条件？这些是我们开发的东西，你觉得可能遇到的问题是什么？作为前端开发者，我们更应该考虑这样的边缘情况，而不是只跟猫虎虎一样简单的UI。由于本文侧重于思考过程，因此不可能详细介绍每种可能的情况。在上述模型的第一版和第三版中，步数分别为3和2。我们可以让CSS动态处理它吗？是的。HTML
