共计 4030 个字符,预计需要花费 11 分钟才能阅读完成。
作者:Ahmad Shadeed
译者:前端小智
起源:ishadeed
点赞再看,养成习惯
本文
GitHub
https://github.com/qq44924588… 上曾经收录,更多往期高赞文章的分类,也整顿了很多我的文档,和教程材料。欢送 Star 和欠缺,大家面试能够参照考点温习,心愿咱们一起有点货色。
最近开源了一个 Vue 组件,还不够欠缺,欢送大家来一起欠缺它,也心愿大家能给个 star 反对一下,谢谢各位了。
github 地址:https://github.com/qq44924588…
大家看到这个题目可能会认为小智是不是又写错别字了 ????,响应式高度设计?你认真的吗?因为“响应式 Web 设计”通常是在多个宽度和设施尺寸上查看浏览器。咱们个别通过减小宽度调整程度方向的响应能力,然而我很少看到通过减小浏览器高度来进行垂直响应的思考。此时,智米么心田可能有一丝的稳定,并带有许些疑难:咱们须要升高浏览器的高度吗?是的,咱们始终探讨一下。
当咱们在设计网站的时候,不依赖理论数据进行假如是不好的,程度和垂直测试的责任也是十分重要。
为什么要测试高度?
对于一个设计师来说,一个不合理的假如是毁掉一个网站设计的重要因素之一。例如,假如用户必定是通过应用屏幕的全宽和全高浏览网站是不正确的。相同,咱们须要思考最坏的状况。
智米么,看明确了吗。现实情况是,并非所有用户都依照咱们所冀望一样应用浏览器。我发现升高浏览器高度时网站看起来很蹩脚。
浏览器 DevTools
调整浏览器的大小 (垂直方向) 并不是扭转视口高度的惟一办法。当咱们关上浏览器 DevTools,它也会占用浏览器的高度。
上图中的箭头区域代表以后视口的高度,对于较小的笔记本电脑屏幕,咱们只会看到一小部分网页。
真正的问题是:当视口高度较小时,咱们能够加强用户体验吗?是的,有可能,咱们来一起看看。
CSS 中的垂直思考
作为设计师和开发人员,咱们中的一些人只关注设计的宽度变动,而疏忽了视口高度变动。例如,在开发中,UI 提供了特定组件在不同视口宽度上的变动。然而,不同的视口高度又如何呢?
在上图中,咱们有一个基于视区高度进行调整的导航菜单。。如果视口大小很小(比方,iPhone 5),导航项将显示为一个两列网格。这种思维形式通常会被舍弃,或者直到有人说要做才会这么去优化。
CSS 中能够通过应用两种不同形式来实现下面的需要:
- Vertical media queries
- Viewport units
Vertical Media Queries
智米么必定常识在 CSS 中应用宽度媒体查问。
@media (min-width: 700px) { | |
.element {/* do something.. */} | |
} |
较少应用的是垂直媒体查问,它查看视口高度。
@media (min-height: 500px) { | |
.element {/* do something.. */} | |
} | |
/* or */ | |
@media (orientation: landscape) { | |
.element {/* do something.. */} | |
} |
视口单位
应用 视口单位 能够帮忙为用户提供更好的体验。例如,依据视口高度管制元素之间的垂直间距。
.hero__title {margin-bottom: calc(10px + 5vh); | |
} |
如上所示,大比拟大的屏幕(例如 iMac 27 英寸),下边距就会变的很大。咱们有两种形式来解决边距过大的问题。
- Media queries
- CSS comparison 函数
第一种形式(媒体查问)受到更多反对。如果屏幕很大,咱们须要为下边距设置最大值。
@media (min-width: 2200px) { | |
.hero__title {margin-bottom: 40px;} | |
} |
另一种办法是应用 CSS clamp()
比拟函数,clamp()
函数的作用是返回一个区间范畴的值。
.hero__title {margin-bottom: clamp(10px, 5vh, 40px); | |
} |
用例一:重叠内容
在此示例中,有一个 section 区域,其中有题目和插图的局部, section 高度等于视口高度的 100%。
所有看起来都很好,直到视口高度变小。section 的高度将不足以包容插图和文本内容。因而,它将与页面上的其余局部重叠。
留神插图与上面的局部如何重叠。产生这种状况是因为有足够的垂直空间。看一下 HTML 和 CSS。
<div class="hero"> | |
<div class="hero__wrapper"> | |
<div class="hero__content"><!-- content --></div> | |
<img class="hero__thumb" src="figure.png" alt="" /> | |
</div> | |
</div> |
css
.hero {height: 100vh;} | |
.hero__thumb { | |
flex: 0 0 550px; | |
width: 550px; | |
} |
上面是解决此类问题几种解决方案:
- 为插图设置固定大小(宽度和高度),而不是仅设置宽度,不足高度将会持续存在这个问题。
- 仅当视口高度大于
700px
时才为height: 100vh
(媒体查问值可能会依据上下文而有所不同)。
咱们能够将两者联合起来,取得更弱小的解决方案。
.hero__thumb { | |
width: 400px; | |
height: 300px; | |
object-fit: contain; /* To avoid compressing the image */ | |
} | |
@media (min-height: 700px) { | |
.hero {height: 100vh;} |
好的,当初咱们批准应用垂直媒体查问更好。然而,应用 100vh
是有危险的,因为即便咱们限度了插图的大小,也可能无奈对文本内容执行雷同的操作。如果文本内容变长,同样的问题会再次发生,参见下图:
为了解决这个问题,咱们能够应用 min-height
而不是height
。这样,如果内容变长,高度将扩充并且不会重叠。
@media (min-height: 700px) { | |
.hero {min-height: 100vh;} | |
} |
固定头部
在滚动时固定题目并不是一件好事,然而,咱们要确保只有在垂直空间足够好的状况下才固定题目,这样体验才会好。
这是一个对于风光类的网站,这里咱们能够看到,当高度过小的时候,这个固定高度整体就会占用很大的空间。这个对用户真的重要吗? 大多数状况是不重要的,因为个别用户不会缩小成这样去看一个网站。以后,如果咱们要优化也是能够就是,思路就是通过垂直媒体查问,判断高度小于某个高度的时候就将固定定位改成动态定位。
@media (min-height: 700px) { | |
.site-header {/* position: fixed or position: sticky */} | |
} |
暗藏不太重要的元素
我在 Twitter.com 的导航栏上留神到了这个模式。其思维是将垂直媒体查问和 Priority+ 模式联合起来。
调整视口高度的大小时,次重要的元素(书签和列表)将被删除并附加到“更多”菜单中,这是垂直媒体查问的一个很好的用例。
.nav__item--secondary {display: none;} | |
@media (min-height: 700px) { | |
.nav__item--secondary {display: block;} | |
} |
缩小间距 - 导航
如果咱们网站有侧边栏或侧边栏,当视口高度很小时,咱们能够缩小一些导航项之间的垂直间距,这也会加强整体设计。
.nav__item { | |
padding-top: 4px; | |
padding-bottom: 4px; | |
} | |
@media (min-height: 700px) { | |
.nav__item { | |
padding-top: 10px; | |
padding-bottom: 10px; | |
} | |
} |
模态框
咱们晓得,模态框至多应该程度居中。然而,有时咱们还须要垂直居中,咱们个别会应用上面的计划:
.modal__body { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
width: 500px; | |
} |
然而,当内容变长时就会有问题,模态框会垂直填满屏幕,用户将无奈滚动它。
引发这种状况下,有几点起因:
- 模态框没有高度
- 模态垂直居中(这会问题更快的呈现)
上面是修复后的 css:
.modal__body { | |
position: absolute; | |
left: 50%; | |
top: 3rem; | |
transform: translateX(-50%); | |
width: 500px; | |
min-height: 200px; | |
max-height: 500px; | |
overflow-y: auto; | |
} | |
@media (min-height: 700px) { | |
.modal__body { | |
top: 50%; | |
transform: translate(-50%, -50%); | |
} | |
} |
留神,我应用了 min-height
和max-height
。min-height
是即便内容很短也要放弃模态看起来好,max-height
是应用特定值限度其高度,而不是增加固定的高度。
总结
在设计一种体验时,最好从宽度和高度的角度来思考。垂直地调整浏览器的大小可能有点奇怪,但它也有它的劣势。在本文中,咱们探讨了垂直测试的重要性,以及咱们如何进行垂直测试,最初,提出了一些示例和用例,心愿对智米们有用。
代码部署后可能存在的 BUG 没法实时晓得,预先为了解决这些 BUG,花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
原文:https://hadeed.com/article/re…
交换
文章每周继续更新,能够微信搜寻「大迁世界」第一工夫浏览和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录,整顿了很多我的文档,欢送 Star 和欠缺,大家面试能够参照考点温习,另外关注公众号,后盾回复 福利,即可看到福利,你懂的。