建站知识
首页 > 网站建设 > 建站知识 > 响应式网站建设的概念

响应式网站建设的概念

发布时间:2021-01-12    来源:广州网站优化公司     浏览次数:

响应式网站建设的概念

Ethan Marcotte曾经在A List Apart中发表文章“响应式Web设计”,其中引用了响应式建筑设计的概念:

最近,一种新兴的学科-“响应式体系结构”提出,物理空间应该能够对其中的人们的状况做出响应。结合嵌入式机器人技术和可拉伸材料的应用,建筑师试图构建一种可以根据周围的人弯曲,收缩和扩展的墙结构。它还可以使用运动传感器与气候控制系统配合使用,以调节内部温度和环境光。一些公司已经在生产“智能玻璃”:当房间中的人数达到一定阈值时,这种玻璃会自动变得不透明以确保隐私。

将此思想扩展到Web设计领域时,我们有了一个全新的概念。为什么有必要为每个用户组创建一套设计和开发解决方案?与响应式架构相似,网页设计还应该能够根据不同的设备环境自动响应和调整。

很明显,我们不能也不需要使用运动传感器或机器人技术。响应式Web设计需要更抽象的思维。幸运的是,一些相关概念已付诸实践响应式网站,例如液体布局,媒体查询和帮助重新格式化页面的脚本。但是响应式网页设计不仅涉及屏幕分辨率的适应和图片的自动缩放等,还更像是一种新的设计思维方式。

调整分辨率

不同的设备具有各自的屏幕分辨率,清晰度和屏幕方向。不断开发的各种新设备也将带来新的屏幕尺寸规格。有些设备基于肖像,有些基于风景,甚至是正方形。对于日益流行的iPhone,iPad以及其他智能手机和平板电脑,用户还可以通过旋转设备随意改变屏幕的方向。一种设计解决方案如何满足所有情况?

响应式网站

为了与水平和垂直屏幕都兼容(用户也可以在页面加载期间切换方向),我们必须考虑N个屏幕尺寸规格。确实,我们可以将这些规范分为几个类别,然后为每个类别制定一个计划,以确保至少在该组中该计划尽可能灵活。但是即使如此,结果仍将是极其令人担忧的。谁知道5年后某些类型的设备所占的份额?而且许多用户甚至没有最大化浏览器窗口。对于这样的变量,我们应该考虑多少?

Morten Hjerde和他的同事对2005年至2008年市场上超过400种移动设备进行了统计(请查看报告)。下图显示了大概的统计结果:

响应式网站

2008年之后,越来越多的代表性新设备问世并开始流行。显然,我们不能继续遵循“多计划”思想;那我们该怎么办?

解决方案的一部分:一切都很灵活

几年前,灵活的布局几乎是一种奢侈。所谓的灵活性仅体现在垂直布局和字体大小上。即使很灵活,图片也总是很容易破坏页面结构。在极端情况下,元素结构仍然会破坏布局。因此,所谓的灵活布局并不那么灵活。有时它甚至无法适应台式机和笔记本电脑之间屏幕分辨率的差异,更不用说移动电话等移动设备了。

现在响应式网站,我们可以通过响应式设计和开发思想使页面更加“灵活”。图片的大小可以自动调整,并且页面布局不会被破坏。尽管从来没有完美的解决方案,但它为我们提供了更多选择。无论用户切换设备的屏幕方向,还是从桌面屏幕切换到iPad进行浏览,页面都将真正具有灵活性。

在上面提到的Ethan Marcotte的文章中,他通过一个例子展示了响应式Web设计在页面灵活性方面的特征:

响应式网站

此示例的实现完美地结合了液体网格和液体图像技术,并在正确的位置巧妙地使用了正确的HTML标签。 “液格”是一种很常见的练习方法;对于“液态图片”技术,以下文章进行了很好的介绍:

隐藏和显示部分图像

创建滑动合成图像

与布局成比例的前景图像

在创建液体页面时,最好看一下Zoe Mickley Gillenwater的“灵活的Web设计:使用CSS创建液体和弹性布局”,或者首先下载示例章节:“如何创建弹性图像” ”。此外,Zoe的“用于创建液体和弹性布局的基本资源”。提供了有关创建灵活的网格和布局的大量教程,资源,创意指导和最佳实践。

从技术角度来看,尽管这些听起来简单可行,但比“将这些功能组合在一起”要复杂得多。例如,仔细查看Ethan Marcotte提供的示例中的徽标图像:

响应式网站

如果我们继续减小浏览器窗口的大小,我们会发现徽标图像的文本部分将始终保持逐年缩小的趋势,以确保其完全可读并且不会在两侧被截断。喜欢周围的插图。因此,整个徽标实际上由两部分组成:插图是页面标题的背景图像,它将保持大小,但是在调整布局时会被裁剪;文本部分是一个单独的图像。

1

2

3

其中,元素使用插图作为背景,文本部分的图像始终与背景对齐。

此示例显示了响应式Web设计的思想。但是,这种小的努力不足以防止整个布局在一个小窗口中变得太窄或太短,并且徽标文本最终将变得太小而无法识别,并且背景图像将被过度裁剪。

上一篇:浅谈响应式网站建设设计与传统的网站建设有哪些优势?

下一篇:企业为什么要做网站建设

返回顶部

售前客服QQ

售后客服QQ

加微信交谈

加微信交谈

x