建站知识
首页 > 网站建设 > 建站知识 > 响应式网站设计原则

响应式网站设计原则

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

在QA TechWeek 2014期间,QA公司首席技术专家David Walker在会议上提出了使用基金会进行响应式设计的响应式网站设计原则。 Walker提到了从现有桌面网站创建移动应用程序网站的多种方法:针对每个移动操作系统开发的本机应用程序;使用PhoneGap或类似工具嵌入HTML 5;在服务器端或桌面分别进行过滤。使用移动设备构建网站并在两者之间重定向。

沃克分析了每种方法的优缺点后,提出了响应式设计(RWD)响应式网站,该方法使用HTML5、JavaScript和CSS创建响应式网站,并根据设备即时调整布局,格式和内容。 RWD的主要好处是避免内容重复响应式网站,以便网站可以适应所有设备,包括未来设备的大小。缺点是需要出色的CSS和JavaScript技能。移动网络中的某些资源太大。较旧的浏览器需要使用Polyfill。

为了实现响应式设计,Walker建议以下原则:

建立流畅的布局。所有容器的宽度必须定义为浏览器视口的百分比。

使用CSS3媒体查询。对于不同的媒体类型(例如屏幕,打印机,电视等)以及不同的媒体参数(例如宽度,高度,颜色,分辨率等)使用不同的样式。

使用流畅的图像。图片大小可以适应最大显示宽度。

要确定样式适用于哪种媒体类型,您需要确定不同的显示宽度。例如,使用了40多种与“媒体查询”相关的样式。可以通过Chrome扩展程序响应式检查器进行查看。通过这些样式,内容将在浏览器级别自动响应布局,因此即使将其显示在不同宽度的设备上,页面也不需要水平滚动。

Walker说,还需要考虑响应式网站设计:

针对不同设备和网络速度优化图片;

更改移动UI / UX的导航模式;

更改链接和按钮的样式以使其适合触摸;

动态调整字体大小以适应不同的屏幕分辨率;

按需加载而不是隐藏内容;

提供图形的Retina版本。

上一篇:响应式布局总结

下一篇:企业官网是什么意思?企业官网建设要注意什么?

返回顶部

售前客服QQ

售后客服QQ

加微信交谈

加微信交谈

x