本文已经过原作者 Ahmad Shadeed 授权翻译
大家看到这个标题可能会以为小智是不是又写错别字了,响应式高度设计?你认真的吗?因为“响应式Web设计”通常是在多个宽度和设备尺寸上检查浏览器 。我们一般通过减小宽度调整水平方向的响应能力,但是我很少看到通过减小浏览器高度来进行垂直响应的考虑 。此时,智米么内心可能有一丝的波动,并带有许些疑问:我们需要降低浏览器的高度吗?是的,我们一直探讨一下 。
当我们在设计网站的时候,不依赖实际数据进行假设是不好的,水平和垂直测试的责任也是非常重要 。
为什么要测试高度?对于一个设计师来说,一个不合理的假设是毁掉一个网站设计的重要因素之一 。例如,假设用户肯定是通过使用屏幕的全宽和全高浏览网站是不正确的 。相反,我们需要考虑最坏的情况 。
文章插图
智米么,看明白了吗 。现实情况是,并非所有用户都按照我们所期望一样使用浏览器 。我发现降低浏览器高度时网站看起来很糟糕 。
浏览器 DevTools调整浏览器的大小(垂直方向)并不是改变视口高度的唯一方法 。当我们打开浏览器DevTools,它也会占用浏览器的高度 。
文章插图
上图中的箭头区域代表当前视口的高度,对于较小的笔记本电脑屏幕,我们只会看到一小部分网页 。
真正的问题是:当视口高度较小时,我们可以增强用户体验吗?是的,有可能,我们来一起看看 。
css 中的垂直思考作为设计师和开发人员,我们中的一些人只关注设计的宽度变化,而忽略了视口高度变化 。例如,在开发中,UI 提供了特定组件在不同视口宽度上的变化 。但是,不同的视口高度又如何呢?
文章插图
在上图中,我们有一个基于视区高度进行调整的导航菜单 。。如果视口大小很小(比如,iphone 5),导航项将显示为一个两列网格 。这种思维方式通常会被舍弃,或者直到有人说要做才会这么去优化 。
CSS 中可以通过使用两种不同方式来实现上面的需求:
- Vertical media queries
- Viewport units
@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 。
推荐阅读
- Linux两种处理模式reactor模式proactor模式
- 「分布式计算」什么是严格一致性和最终一致性?
- 韩式减肥方法不喝水好吗
- 握手礼仪注意事项
- 荔枝红茶冲泡方式先容,红茶的冲泡水温
- 林治老师即将开班,六安茶业技术培训班正式开班
- 龙合茶业招商加盟信息,福鼎白茶招商加盟联系方式
- 白琳功夫红茶冲泡方式,白琳工夫茶简介
- 什么是供应链金融 供应链金融有哪些模式
- Spring Boot 使用拦截器优雅打印接口响应时间