网站首页 > 技术文章 正文
本文已经过原作者 Ishadeed 授权翻译。
经常有人私信我,小智这个设计图用 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 完全匹配,还要考虑边缘情况。希望智米从本文中学到至少一件事。
我是小智,我们下期再见!
作者:Ishadeed 译者:前端小智 来源: ishadeed
原文:https://ishadeed.com/article/thinking-like-a-front-end-developer/
猜你喜欢
- 2025-07-08 新手小白怎么学UI设计 推荐学习路线是什么
- 2025-07-08 超实用!0基础UI设计自学指南(0基础学ui设计好就业吗)
- 2025-07-08 UI设计应该如何自学?(ui设计怎么学少走弯路)
- 2025-07-08 怎么从零开始学UI设计 什么学习路线适合新手
- 2024-10-12 前端设计之UI框架制作-input提示框
- 2024-10-12 UI设计师应该如何应对前端? ui设计师会前端
- 2024-10-12 13条规则运用好,保证你的官网首页设计感拉满。
- 2024-10-12 UI设计:网页vs移动,设计思路真的不一样,不要照搬经验。
- 2024-10-12 移动UI:发现页面,是什么,有啥作用,该如何设计呢?
- 2024-10-12 研发提效:通过设计稿自动生成前端代码
你 发表评论:
欢迎- 07-08记oracle日志挖掘实操&查询归档不正常增长情况(一)
- 07-08Oracle 伪列!这些隐藏用法你都知道吗?
- 07-08orcl数据库查询重复数据及删除重复数据方法
- 07-08重大故障!业务核心表被truncate删除,准备跑路……
- 07-08oracle数据恢复—oracle执行truncate命令误删除数据的数据恢复
- 07-08Oracle-rac 修改scanip(oracle 修改sequence cache)
- 07-08ORACLE RAC CDB和PDB切换(oracle数据库rac切换)
- 07-08Oracle rac haip作用(oracle rac的典型特征)
- 596℃几个Oracle空值处理函数 oracle处理null值的函数
- 590℃Oracle分析函数之Lag和Lead()使用
- 578℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 573℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 569℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 562℃【数据统计分析】详解Oracle分组函数之CUBE
- 549℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 542℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- 记oracle日志挖掘实操&查询归档不正常增长情况(一)
- Oracle 伪列!这些隐藏用法你都知道吗?
- orcl数据库查询重复数据及删除重复数据方法
- 重大故障!业务核心表被truncate删除,准备跑路……
- oracle数据恢复—oracle执行truncate命令误删除数据的数据恢复
- Oracle-rac 修改scanip(oracle 修改sequence cache)
- ORACLE RAC CDB和PDB切换(oracle数据库rac切换)
- Oracle rac haip作用(oracle rac的典型特征)
- 新手小白怎么学UI设计 推荐学习路线是什么
- 超实用!0基础UI设计自学指南(0基础学ui设计好就业吗)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)