本文已由原作者 Ahmad Shadeed 翻译
听到这个标题,你可能会认为小智又打错字了。 反应灵敏且设计精良? 你是认真的吗?因为“响应式网页设计”通常是关于检测跨多种长度和设备尺寸的浏览器。 我们通常通过减少长度来调整水平响应能力,但我很少看到通过减少浏览器高度来考虑垂直响应能力。 这个时候,知米心里可能会有一点点波动,有些疑惑:我们需要增加浏览器的高度吗? 是的,我们仍然详细说明。
我们在设计网站时,不依赖实际数据就做出假设是不好的,横向和纵向测试的责任也很重要。
为什么要测试海拔高度?
对于设计师来说,不合理的假设是毁掉网站设计的最重要的触发因素之一。 例如,假设用户肯定正在使用屏幕的全宽和全高来查看网站是不正确的。 相反,我们需要考虑最坏的情况。
吉米,你明白吗? 现实情况是,并非所有用户都按照我们期望的方式使用浏览器。 我发现当增加浏览器的高度时该网站看起来很糟糕。
浏览器开发工具
调整浏览器大小(垂直)并不是更改图层高度的唯一方法。 当我们打开浏览器DevTools时,它也会占据浏览器的高度。
上图中的箭头区域代表当前图层的高度。 对于较小的笔记本电脑屏幕,我们只能看到网页的一小部分。
真正的问题是:当层高较小时,我们能否改善用户体验? 是的,有可能,让我们看看。
CSS 中的垂直思考
作为设计师和开发人员,我们中的一些人只关注设计的长度变化而忽略层高变化。 例如,在开发中,UI 提供不同层长度的特定组件的变体。 但是不同的层高又如何呢?
在上图中,我们有一个根据视口高度进行调整的导航菜单。 。 如果图层尺寸较小(例如,iPhone 5),导航项将显示为两列网格。 这种思维方式一般都会被放弃,或者直到有人说去做才能够优化。
CSS可以通过两种不同的方式来实现需求:
垂直媒体查询
你确定知道如何在 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);
}
如上图elementUI列高度,对于较大的屏幕(例如iMac 27英寸),底线间距会变得非常大。 我们有两种方法来解决行间距过大的问题。
第一种形式(媒体查询)受到更多支持。 如果屏幕很大,我们需要给下行行距设置一个最大值。
@media (min-width: 2200px) {
.hero__title {
margin-bottom: 40px;
}
}
另一种方法是使用CSS的clamp()比较函数。 钳位()函数的作用是返回一个区间范围内的值。
.hero__title {
margin-bottom: clamp(10px, 5vh, 40px);
}
用例一:重叠内容
在本例中,有一个剖面区域,其中包含标题和插图,剖面高度等于图层高度的100%。
一切看起来都很好,直到层高变小。 该部分的高度不足以容纳插图和文字内容。 因此,它将与页面的其他部分重叠。
请注意插图如何与下面的部分重叠。 发生这种情况是因为有足够的垂直空间。 看一下 HTML 和 CSS。
<div class="hero">
<div class="hero__wrapper">
<div class="hero__content">
发表评论