作者: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>
还是 CSSbackground
? - 图片的预期长宽比是多少?
- 咱们是否须要依据视口大小应用多个图像大小?
- 图片的局部是否可能会换成视频?
高度
内容最小高度是多少?
内容长度
咱们须要设置题目和形容的最大长度吗? 如果是,设计冀望解决的最小值和最大值是多少?
元素之间的间距
如何解决垂直间距?
内容核心
如何程度和垂直居中内容? 已知咱们只晓得宽度,而高度是未知的。
限度内容
为了进步可读性,最好限度内容。现实的宽度是多少?
响应式设计
咱们须要依据视窗宽度扭转字体大小吗? 如果是,咱们应该应用基于 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 和欠缺,大家面试能够参照考点温习,另外关注公众号,后盾回复 福利,即可看到福利,你懂的。