什么是响应式设计? (解释器视频和信息图)

响应式网页设计

花了十年的时间 响应式网页设计 (RWD)成为主流 卡梅伦·亚当斯(Cameron Adams)首次介绍 这个概念。 这个想法很巧妙-为什么我们不能设计出与所查看设备的视口相适应的网站?

什么是响应式设计?

响应式网页设计(RWD)是一种网页设计方法,旨在为各种站点(从移动电话到台式计算机)提供最佳的观看体验-易于阅读和导航,同时具有最小的调整大小,平移和滚动,从而提供最佳的观看体验显示器)。 通过RWD设计的站点通过使用流畅的,基于比例的网格,灵活的图像和CSS3媒体查询(@media规则的扩展)来使布局适应查看环境。

维基百科上的数据

换句话说,可以调整像图像这样的元素以及这些元素的布局。 这是一个视频,解释了什么是响应式设计以及您的公司为什么要实施它。 我们最近重新开发了 DK New Media 网站响应迅速,目前正在努力 Martech Zone 做同样的事情!

建立响应站点的方法有点繁琐,因为您需要对基于视口大小组织的样式具有层次结构。

浏览器会自动感知其大小,因此会从上到下加载样式表,并查询适用于屏幕大小的样式。 这并不意味着您必须为每种尺寸的屏幕设计不同的样式表,只需要移动必要的元素即可。

如今,以移动第一的心态进行操作是基线标准。 一流的品牌不仅在考虑其站点是否适合移动设备使用,还在考虑完整的客户体验。

Monetate首席执行官Lucinda Duncalfe

这是来自Monetate的信息图,说明了为多个设备创建一个响应式设计的潜在好处:

响应式网页设计图表

如果您希望看到一个反应迅速的网站,请指向 谷歌 Chrome 浏览器 浏览器(我相信Firefox具有相同的功能) DK New Media。 现在选择 查看>开发人员>开发人员工具 从菜单中。 这将在浏览器底部加载一堆工具。 单击“开发人员工具”菜单栏最左侧的移动小图标。

响应测试铬

您可以使用顶部的导航选项将视图从横向更改为纵向,甚至可以选择任意数量的预编程视口大小。 您可能需要重新加载页面,但这是世界上最酷的工具,用于验证您的响应式设置并确保您的网站在所有设备上的外观都很好!

3条评论

  1. 1
  2. 2

    非常感谢道格拉斯这篇解释得很好的文章。 尽管在内容方面,我必须同意这一点。 对于大多数网站,我们制作响应式布局是不够的。 我们需要响应式内容。 但是对于更基本的网站,我们一定会使用您记录良好的文章来说明如何处理这个问题!

你觉得呢?

本网站使用Akismet来减少垃圾邮件。 了解您的数据如何处理.