拿到UI的时候，前端人应该怎么想？
时间：2023-04-03 00:23:37
HTML
作者：Ishadeed译者：前端小智来源：ishadeed点赞再看，微信搜索【大千世界】，关注B站【前端小智】，此人无背景在大厂工作，但态度积极。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...双12阿里服务器27元，一般点这里购买，可以找我返现30，相当于27元购买，仅限新用户，可以用家人手机号购买！经常有人私信问小智的设计应该怎么用CSS布局，这个按钮应该怎么画。所以今天在这篇文章中，我们将介绍一些新的布局方式，希望对智米有用。把设计细节放在一边我通常做的第一件事就是把设计细节放在一边。我想知道这个设计的主要部分是什么，然后关注每个部分的细节。考虑以下UI：在上面的UI中，有以下几个特点：HowitworkssectioninthemiddlecontentsectionofthebottomofHeader/Navigation接下来，我们首先抽象这三个主要部分：抽象之后，我们可以看到主要Song可以帮助我们思考如何布局组件，而不必考虑每个组件的细节。我是这样想的：Full-widthheader:header的导航栏CenteredContent:中间的内容水平居中。请注意，这通常需要设置最大宽度max-width。工作原理：这是一个4列布局，整个部分都被限制在一个包装器中。接下来将以上三部分用代码表达：
因为我们有一个4列的部分，这里我使用CSSGrid:.wrapper{margin-left:auto;右边距：自动；左填充：1rem；向右填充：1rem；最大宽度：1140px;}.hero__content{最大宽度：700px;左边距：自动；margin-right:auto;}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);}当我们拿到UI后，并不是马上开始行动，而是观察整体的构成，先实现每一块的构成，再深入进入组成的实现。文章页面在这个例子中，我们有一个文章页面布局。这是UI，其中包括：headerimagearticletitlearticlecontentsidebar(beside)我们再次将其抽象为几个主要部分：抽象主要包括几个部分：网站的header宽度为100%title：包含标题和描述文章的，其内容是左对齐的。要设置最大宽度的两列布局，它包含主要元素和侧边栏元素。文章内容，水平居中并有最大宽度。文章-页面标题这里不需要任何布局方法。一个简单的max-width就足够了，当然，还需要一些padding来增加舒适的距离。.page-header{最大宽度：50rem;padding:2rem1rem;}Article-Main和Sidebarmain元素是视口的整个宽度减去侧边栏的宽度。一般来说，侧边栏应该有一个固定的宽度。为此，使用CSSGrid是完美的。.page-wrapper{显示：网格；grid-template-columns:1fr;}@media(min-width:800px){grid-template-columns:1fr250px;}对于文章的内部内容，应该限制在wrapper中。.inner-content{最大宽度：50rem；左边距：自动；右边距：自动；左填充：1rem；padding-right:1rem;}在整体布局了一番之后，我们来看一下具体的细节。深入了解“工作原理”部分的细节在本文的第一个示例中，让我们看一下“工作原理”部分的详细实现。在此处列出步骤1、2和3。有没有增加或减少的可能？如果是这样，我们应该如何处理呢？我们是否需要列的高度相等，特别是当卡片有很长的文本时？标题我们需要将章节标题放在一边吗？或者在某些情况下它应该是全宽的吗？响应式设计当网页宽度缩小时，我们是否需要响应式？如果是，触发条件是什么？这些是我们在开发中可能会遇到的问题，你怎么看？作为前端开发者，我们更应该考虑这样的边缘情况，而不是只跟猫虎虎一样简单的UI。由于本文侧重于思考过程，因此不可能详细介绍每种可能的情况。在上述模型的第一版和第三版中，步数分别为3和2。我们可以让CSS动态化来处理这个问题吗？能。HTML
