既然我们前面已经介绍了什么是响应式网页设计，那么就已经知道现在的整体趋势，本文HostGator美国虚拟主机商再从一些详细例子上面来介绍一下响应式网页设计的效果。下面是一些企业的例子，它们明白这个道理并创建了响应式商业网站。
1、CliftonLarsonAllen LLP
作为金融、外包和税务公司，CliftonLarsonAllen是网站视觉层级的一个很好的例子。他们的响应式网站的所有这个三个主要版本都以相同的图像、消息和行动召唤（CTA）按钮为中心。你能说出他们希望访问者做什么吗？每个网站版本还提供了许多清晰的链接，可以根据访问者感兴趣的服务类型了解更多信息，所有这些都很容易在滚动时发现（某些情况下就在第一个屏幕上）。视觉层次在响应式设计中的一个很好的例子。
2、The Living Well
女性健康和保健公司，The Living Well有一个以图片为中心的简单网站，在不同的设备类型上提供相同的信息。最初的商标、横幅和菜单项在所有版本中都是可见的，并传达了企业的全部内容。潜在客户可以通过向下滚动、点击页面上明显的相关链接，或者点击所有屏幕大小都可见的社交按钮，了解更多关于企业背后的女性和特定的服务。
3、Yard Bar
Yard Bar也有一个响应式的网站，以图像为中心。滑动的图片突出显示了你需要了解的关于这个企业的主要内容：所有都是关于食物、饮料和狗的。在不同的设备上，向下滚动查看更多关于这三个主要类别的信息以及欢乐的时光。通过任何设备访问网站的人都可以快速了解该公司的业务内容以及他们在访问前需要了解的主要信息。
4、Bonsai
自由投稿的软件公司Bonsai有一个干净和清晰的响应式网站。像CliftonLarsonAllen一样，他们通过不同的设备在网站上明确了主要信息和CTA。该网站提供了一个移动或删除某些在较小屏幕上不那么重要的元素的很好的例子。虽然在大多数情况下，页面在所有设备上是相同的，但较大的屏幕上有一个表格，在那里可以提供你的电子邮件。为了节省空间，移动版本将表格移出主页，但保留了CTA（单击后，将进入表格）。这样使得空间看起来更整洁，并且仍然提供相同的基本信息和选项。
5、Salt Lick Cellars
Salt Lick Cellars酒庄是另一个以图片为中心的商业网站，对于一个经常以美景吸引顾客的行业来说，这是有意义的。智能手机屏幕上主图像裁剪变小——虽然看不出图片扩大的样子，却仍然可以得到它的主要思想，凭着直觉进入菜单（右上角汉堡菜单），并有图像来引导你向下滚动以获取更多信息。
虽然商业网站的最终目标是销售产品或服务，但电子商务网站正试图以一种更直接的方式进行销售——就在网站本身。我们有必要看看不同的电子商务网站如何使用它们的响应式设计来跨设备实现这一点。当设计一个电子商务网站时，让网站移动响应和易于使用是特别重要的。
6.、纸&墨艺术
纸&墨艺术的手机主页有着与台式机和平板电脑相同的元素，但由于相同的元素占用了不同的空间，在不同的设备之间，主页会带给人一些不同的感受。图像幻灯片在较大设备上支配着屏幕，为了给其它促销腾出空间，在移动手机上成为了一个较小的横幅。菜单被压缩成汉堡菜单，以便在顶部留出空间，以便轻松访问搜索、联系信息以及购物车。这些选择明确了该公司销售的首要任务，并使访问者很容易与之取得联系。
7、Penzeys
Penzeys看起来像他们涉及的主菜单，考虑到了移动体验。菜单有四种简单的分类，在大屏幕上只占了很小的空间，并且完全适合智能手机屏幕的尺寸。这三个屏幕的结帐按钮都以橙色显示，右上角免运费服务以红色显示。所有版本都让主导屏幕的中心图像成为使用该公司香料制作的看起来美味的食谱图片（这是一个不可抗拒的购买理由）。
8. Bon Bon Bon
和许多商业网站一样，巧克力店Bon Bon Bon的图片前后也带有明显的CTA。它有一个图像滑块，所以图像和CTA会改变，但是CTA总是在一个鲜红色的按钮中。就像Paper & Ink 一样，Bon Bon Bon让主图像变得更小，更像一个横幅广告，以便让其他一些页面元素出现在手机屏幕上。而在手机屏幕的顶部，购物车和寻找联系信息的链接依然保持清晰。
9. Chewy.com
在线宠物用品商店Chewy.com在这三种设备上看起来非常相似，主要的区别是将菜单变成压缩汉堡菜单的常见响应选项。这是一个很少见的响应式网站，手机上的主图像无法加载到适应屏幕尺寸的大小程度——它会被切断，但访问者可以选择从左到右滚动查看照片中所看不到的部分。这三个版本都突出了搜索栏的功能，便于访问者找到明确的产品。而且所有的橙色标识都明显有30%的折扣。
10. Pacha Soaps
Pacha Soaps在不同设备上的外观非常相似。正如我们在其他网站上看到的一样，这三个版本的屏幕上都有占主导作用的滑动图像。与其他一些例子不同，图像在智能手机屏幕上占用的屏幕空间更大，而不是更小。缩小时，棕色菜单依然为免运费，社会处理信息呈现在整个屏幕上，同时在较小的屏幕上切换到适合主菜单的汉堡菜单。即使你正在建立一个个人网站，分享你的酷爱，而不是销售产品或促进业务，让网站响应是值得的。这里有一些来自人们建立在激情之上的个人网站响应式网页设计的例子。
11、The April Blake
April Blake的博客主要是分享她的食谱和偶然的感言。她的网站在屏幕大小上看起来非常相似，只有一些小的差别。桌面页面顶部的社交图标在较小的屏幕上被移除，主菜单被压缩为汉堡包菜单。此外，只需重新排列页面上的元素以更好地适应屏幕即可。
12. House of Hipsters
Kyla Herbes的家居设计博客House of Hipsters在不同的设备类型之间变化不大。菜单切换到下拉菜单，顶部的标题横幅变小，右边的菜单在较小的设备上向下移动页面。但除此之外，无论来自哪里，网站本质上是一样的。
13. Aileen
生活方式和旅游博客我是Aileen的响应式网站在所有大小的设备上都有一个图片幻灯片，上面有一个明显的搜索栏和社交图标。主菜单在移动设备上变成了汉堡菜单，主图像下方的内容和图像框堆叠在较小的屏幕上。
14、The Frugal Gir
The Frugal Gir博客使商标和标语在网站类型的顶部一直可见的，并且顶部博客帖子集中在这三个版本中。主菜单在最小屏幕上变成汉堡菜单，右侧菜单中的信息和图像被推到底部。
15、 Budget Bytes
最后，Budget Bytes将在所有尺寸设备上的最新菜谱的图像和详细信息集中在一起，但却将移动设备上的详细信息和名称移动到图像下方。在这三个版本中，商标和网站名称都显示在顶部。而且，正如我们的示例中常见的那样，移动版的主菜单被替换为汉堡菜单，以及搜索图标，以便在屏幕顶部留出更多空间。虽然在两个较大的屏幕上，附加食谱的图片和名称并排显示在主图像的下方，并堆积在移动设备上。
正如这些例子所展示的，有许多方法可以组织一个响应式网站，使其在所有的设备类型上都能很好地工作。此外，不一定只有拥有大预算的大企业才能创建响应式网站——这其中的许多例子都是小型企业或个人的。如果想要一个简单的，负担得起的方式来创建响应式网站，Gator网站构建器有超过100个响应式模板，为构建一个看起来不错且跨设备类型工作的网站提供了一个良好的前驱。要开始构建网站，可以访问HostGator美国虚拟主机商官方网站，我们专业人员为你找到合适的虚拟主机选项。