建站知识
首页 > 网站建设 > 建站知识 > 设计(ResponsiveWebdesign)的理论和实践(组图)

设计(ResponsiveWebdesign)的理论和实践(组图)

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

自适应网站设计

响应式网站设计是网页设计布局。这个想法的重点是创建页面的图片布局大小,并根据用户行为和所使用的设备环境智能地进行相应的布局。

设计概念

这个概念是由国外著名网页设计师Ethan Marcotte于2010年5月提出的。

响应式Web设计的概念是:

页面的设计和开发应根据用户行为和设备环境(系统平台,屏幕尺寸,屏幕方向等)做出响应并进行相应调整。具体的实践方法包括很多方面,包括使用灵活的网格和布局,图片以及CSS媒体查询。无论用户是使用笔记本电脑还是iPad,我们的页面都应该能够自动切换分辨率,图像大小以及相关的脚本功能,以适应不同的设备;换句话说,页面应该具有自动响应用户设备环境的能力。响应式网页设计是一个网站可以与多个终端兼容,而不是为每个终端制作一个特定的版本。这样,我们就不必为不断出现的新设备设计和开发特殊版本。

历史

Ethan Marcotte在他的A List Apart上的文章中发明了术语“响应式Web设计(RWD)”。他在2011年关于该主题的简短书中描述了响应式Web设计的理论和实践。响应式设计在.net杂志的2012年顶级Web设计趋势中排名第二(逐步增强是第一位)。他们还列出了Ethan Marcotte最喜欢的20个响应网站。

提出

Ethan Marcotte曾经在A List Apart中发表文章“响应式Web设计”,其中引用了响应式建筑设计的概念:出现了一个新的学科-“响应式建筑”-提出物理空间应该能够根据当地人民的条件作出回应。结合嵌入式机器人技术和可拉伸材料的应用响应式网站建设,建筑师试图构建一种可以根据周围的人弯曲,收缩和扩展的墙结构。它还可以使用运动传感器与气候控制系统配合使用,以调节内部温度和环境光。一些公司已经在生产“智能玻璃”:当房间中的人数达到一定阈值时,这种玻璃会自动变得不透明,以确保隐私。

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

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

技术手段

一切都很灵活:

我们通过响应式设计和开发思想使页面更加“灵活”。图片的大小可以自动调整,页面

液体图像技术

液体图像技术

布局将不会再被破坏。尽管从来没有最合适的解决方案,但它为我们提供了更多选择。无论用户切换设备的屏幕方向,还是从桌面屏幕切换到iPad进行浏览,页面都将真正具有灵活性。

h5 响应式网站国外_响应式网站布局_响应式网站建设

使用液体网格和液体图像技术,并在正确的位置使用正确的HTML标记。

响应图像:

响应式图像技术的想法:不仅必须按比例缩放图像,而且还必须在小型设备上降低图像本身的分辨率。要实现此技术,需要使用几个相关文件,我们可以在Github上获得这些文件。包括一个JavaScript文件(rwd-images.js),一个.htaccess文件和一些示例资源文件。一般原则是rwd-images.js将检测当前设备的屏幕分辨率。如果是大屏幕设备,则在页面顶部添加一个BASE标记,然后将对图像,脚本和样式表的后续加载请求定向到一个虚拟路径“ / rwd-router”。当这些请求到达服务器时,.htacces文件将确定这些请求是需要原始图像还是小尺寸的“响应图像”,并提供相应的反馈输出。对于具有小屏幕的移动设备响应式网站建设,将永远不会使用原始尺寸的大图片。

上一篇:小企业每年没有做好预算的设置,肯定是赔的比赚得多

下一篇:为什么不同的网站建设制作公司报价费用差异如此大?

返回顶部

售前客服QQ

售后客服QQ

加微信交谈

加微信交谈

x