回溯到 2012 年 12 月，Mashable 宣佈 2013 年为 “响应式网站设计年”。甚至在此之前，响应式网站设计还是一个模煳的概念，但自从那时候开始，它已变得无所不在。
如果您近期尚未建立任何新的网站，您可能会不太清楚什麽是响应式网站，为什麽您会需要这样的网站，以及自己要如何製作一个响应式网站。让我们一起往下看。
什麽是响应式网站？
您可能会想知道：为什麽同一个网站在我的手机上和在我的电脑上看起来不同？这并不是个意外。它是被专门设计过的。
使用响应式网站设计能够使同样一个网站以不同的形式出现在不同的装置上。
那麽，到底什麽是响应式网站以及响应式设计呢？
如果您不是网站设计领域中的工作者，那麽您对这个术语可能不是那麽地熟悉，即使该术语已从一个趋势到现在被实践。
从本质上来说，响应式网站是考虑到您正在浏览的网站的上下文。具体来说，这通常代表着您正在浏览网站的设备。
然而，响应式网站回应的其实并不是浏览器或是装置类型，而是视窗大小。
audi.com 是在 2001 年第一个根据视窗大小进行变更的网站。在当时，这个想法是相当的新颖，以至于在 Netscape Navigator 网页浏览器中，每次要更改视窗大小时都必须重新加载页面。
至少从那时候起，事情开始有了些进展。
今日，响应式设计使用 CSS (阶层式样式表，其中储存着所有您的网页的样式文件) 去建立网站上不同的格式、图片尺寸，以及适用于不同视窗大小的选单。
为什麽您需要使用响应式设计？
如果还是不那麽清楚，您应该致力于让您的网站具有弹性，如此一来，无论使用者是在手机，平板或是电脑上访问您的网站，他们的体验仍然会是最佳的。
2014 年是首次行动装置上的网站流量多于桌机的一年，而今日，使用者在其行动装置上所花费的时间则佔了他们 59% 的时间。
显然地，桌机型的响应式网站设计的时代已经结束了。
但同时，使用者还是会花上他们 41% 的时间在使用桌机，因此，即使使用行动装置的比例成长，您还是不能忽略桌机使用者。
那行动装置专属的网站 (mDot) 呢？
有时候，您会注意到在行动装置的浏览器上浏览网页时，网页会加载为“m.example.com”，而在桌机上浏览时，网页则会加载为 “www.example.com”。那麽，这是一种响应式设计吗？
并不完全是这样。在这种情况下，用户体验似乎被多种装置纳入考量，但在实际上，这是因为网站所有者建立了两个单独的网站，一个用于行动装置，一个用于桌机。
一个网站位于子域名 “m” 上，而另一个网站则位于子域名 “www” 上（或者它可能位于裸域名上）。
这样做的好处是，您可以使用 CSS 的技术去客製化无法透过响应式设计建立的行动装置体验。您可能会想要向行动装置的用户强调您网站上完全不同的元素，又或者基于行销活动的因素，您可能想要将行动装置的用户导向一个独立的销售管道。
缺点是您的网站流量在实际上会被分成为两个不同的网页。任何 SEO 从行动用户登陆 m.example.com 网页上带来的效益都不会转换到 www.example.com。
响应式网站要如何製作呢？
这将取决于您想要如何建立您的网站，您有多大的抱负，并是否有能力学习新的技能。
网站产生器中的 “内建” 响应式设计
您可以透过网站产生器线上设计您的网站，其通常具有将回应式设计 ”内建” 的设计工具。通常您可以在设计的过程中，透过在桌机与行动装置间切换的方式来查看您的网站在行动装置上的外观。
这是整合回应式设计最简单的方法，因为实际上，所有这些都已为您预先编码和预先组合。
在您的内容管理系统 (CMS) 中使用响应式主题
如果您想要使用 WordPress 这类型的 CMS 去建立您的网站，而且出于某种原因您希望网站具有响应式的设计，那麽您就可以为您的网站选择包含响应式设计的主题。
与网站产生器的 ”内建” 响应式设计相似，网站的回应能力与主题会预先被整合成一个套组。
⚠️ 接下来，我们将深入讨论基本的 HTML 编码 ⚠️
将响应式设计整合到您的网站程式码中
但是，如果您需要在您的 CMS 上客製您的网站主题，或者您正在製作自己的网站主题，那麽您可能需要了解一些关于响应式设计元素。
当然，我们无法全面地涵盖所有设计的注意事项，但我们仍然可以为您提供您所需的基本工具。
可视区域
“可视区域” 是指用户可以查看的网页区域。在响应式设计变得热门前，网页是针对桌机所设计出的相对宽幅萤幕，其被压缩至狭窄的行动萤幕中的 “可视区域” 中。
这个结果显然不那麽理想。
最后，将视角设置为与设备同等效果的方法被带入了 HTML。具体来说，这是透过 HTML 标题中的 <meta> 标籤完成的。
<meta> 标籤范例如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
图像
如果图像超出可视区域 (如果它比正在浏览的屏幕更宽)，则用户除了上下滚动外，还必须要左右移动才能浏览内容，而这通常是我们不希望發生的。
为修正这个问题，您可以对具有不同宽度属性的图像设定样式。
另一个方法是使用相对宽度，其中图像会佔据萤幕或它们所在元素的特定百分比。它看起来像这样：
<img src="image.jpg" style="width:100%;">
您也可以设定最大宽度，这表示图像永远不会超过您所设定的最大宽度，但是会在较小的屏幕上缩小。
范例如下：
<img src="image.jpg" style="max-width:100%;height:auto;">
文字档
您还可以根据萤幕大小去重新设定文本大小。通常文本的大小会以 “pt” 为单位，您也可以以 “vw” 作为 “视角宽度” 来衡量其大小。这让您可以依照正在浏览的萤幕大小设定相对的文本大小。
媒体样式 (Media queries)
媒体样式是 CSS 中使用的一种响应式设计技术。它们使您可以设定 “断点”，以使您的网站样式和佈局在特定尺寸的萤幕上成为您想要的样式，而在另一种尺寸的萤幕上则会是另一种样式。“断点” 是宽度的变化。
您可以根据行动装置进行设计，并使用您的媒体样式去为特定宽度或更宽的萤幕设定特殊条件：
@media only screen and (min-width: 600px) {
...
}
或相反：
@media only screen and (max-width: 600px) {
...
}
您可以将其用来控制几乎所有内容的条件。它不会做任何事情来改善用户体验，但是您可以使用它来使文本颜色在特定的萤幕宽度上从蓝色变成红色。我们将这部份的练习保留给您，您可以试着找出如何更有创意地使用这个功能并让您受益其中。
在任何情况下，网站回应用户所用来浏览的设备大小是任何专业网站都不可缺少的功能。
儘管您可能需要像 CMS 主题或网站生成器中那些预设套组，但我们也希望您可以花时间尝试一些 CSS 和 HTML 的响应式设计元素。毕竟，没有比动手尝试更好的学习方法了。
Tagged in Nom de domaine简易代管
