响应式网页设计

The following is an exclusive extract from our new book, Jump Start Responsive Web Design, 2nd Edition, written by Chris Ward. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下是克里斯·沃德(Chris Ward)撰写的新书《快速启动响应式Web设计第二版》的独家摘录。 副本在世界各地的商店中都有出售，或者您可以在此处以电子书形式购买 。

It used to be so simple: you’d design a website or application for a 15-inch monitor, and—incompatibilities between browsers aside—you were done.

它曾经是如此简单：您要为15英寸显示器设计一个网站或应用程序，并且-除了浏览器之间的不兼容之外-您已经完成了。

Then mobile phones with web browsers came along and ruined our easy lives. Worst of all, people loved browsing the Web on them! In 2016, browsing the web on mobile devices overtook desktop browsing for the first time.

然后带有网络浏览器的手机问世，破坏了我们的生活。 最糟糕的是，人们喜欢在他们身上浏览网页！ 2016年，在移动设备上浏览网页首次超过了桌面浏览 。

Just as developers and designers got used to building websites for phones, along came tablets, watches, TVs, cars, glasses, larger desktop screens, high-resolution screens, and even web browsers built into walls. (Okay, I made that last one up.) Supporting this seemingly endless stream of new devices is becoming ever more challenging.

就像开发人员和设计师习惯于建立电话网站一样，平板电脑，手表，电视，汽车，眼镜，更大的台式机屏幕，高分辨率屏幕，甚至是内置在墙壁上的Web浏览器。 (好吧，我做了最后一个。)支持看似无止境的新设备流变得越来越具有挑战性。

So how do we support this ever-increasing array of devices? The answer is responsive web design, which harnesses technologies that allow websites to adapt to screens of all sizes.

那么，我们如何支持不断增长的设备阵列呢？ 答案是响应式Web设计 ，它利用允许网站适应各种尺寸屏幕的技术。

A lot of older sites, or projects maintained by people with little spare time, are unresponsive. For example, the site for the Vassal game engine:

许多较旧的站点或由很少有空闲时间的人维护的项目都没有响应。 例如，Vassal游戏引擎的网站：

Many other sites, like SitePoint.com, are fully responsive:

许多其他站点，例如SitePoint.com，都可以完全响应：

Responsive web design (RWD) subscribes to the popular development maxim “Don’t Repeat Yourself” (usually abbreviated to “DRY”). Instead of maintaining multiple codebases for each device that you wish to support, RWD aims to use a single codebase that adapts appropriately to each device. Using RWD techniques, you write one set of HTML, CSS, and JavaScript, and display elements appropriately for each platform. Many of these styles and elements can even be reused or built upon for maximum code efficiency.

响应式网页设计 (RWD)订阅了流行的开发格言“ Do n't Repeat Yourself”(通常缩写为“ DRY”)。 RWD不想为每个希望支持的设备维护多个代码库，而是致力于使用适合每个设备的单个代码库。 使用RWD技术，您可以编写一组HTML，CSS和JavaScript，并为每个平台适当显示元素。 这些样式和元素中的许多样式甚至都可以重用或构建以最大程度地提高代码效率。

Sound good to you? To begin, let’s go back in time a few years.

听起来对您有好处？ 首先，让我们回到过去的几年。

“Responsive” design is not necessarily new and is a term that can mean different things to different people, making its exact history hard to track down.

“响应式”设计不一定是新颖的，它对不同的人可能意味着不同的含义，从而使其确切的历史难以追溯。

In theory, developers have been creating responsive designs since there was more than one browser. Browsers have always had subtle (and not so subtle) rendering differences between them, and developers have been learning how to cope with these quirks for decades. If you’re new(er) to web development, be thankful the dominance of Internet Explorer’s earlier versions is mostly over. The days of dealing with their quirks were dark.

从理论上讲，由于存在多个浏览器，因此开发人员一直在创建响应式设计。 浏览器之间总是存在细微的(而不是那么细微的)差异，并且开发人员数十年来一直在学习如何应对这些怪癖。 如果您是Web开发的新手，请感谢Internet Explorer的早期版本的统治地位已经结束。 处理古怪的日子是黑暗的。

Since 2004, responsive design has adopted the more specific meaning of adapting your designs to suit a user’s device of choice—typically based on screen size, but also other capabilities. The concepts for responsive design solidified in 2008, but the term is also referred to as “flexible”, “liquid”, “fluid”, and “elastic” design.

自2004年以来，响应式设计采用了更具体的含义，即根据屏幕尺寸以及其他功能来调整设计以使其适合用户选择的设备。 响应式设计的概念在2008年得到巩固，但也被称为“灵活”，“液体”，“流体”和“弹性”设计。

It was the inclusion of media queries in the CSS3 specification that fully gave responsive design the potential it needed to be a genuine and more usable concept. We’ll cover media queries in detail in Chapter 2, but in summary, they allow you to change what you show in a web page based on pre-defined screen sizes or types. Ethan Marcotte formally coined the term “responsive web design” in an article for A List Apart in 2010.

正是在CSS3规范中包含了媒体查询，才使响应式设计完全有可能成为一个真正的，更实用的概念。 我们将在第2章中详细介绍媒体查询，但总而言之，它们允许您根据预定义的屏幕尺寸或类型更改在网页中显示的内容。 Ethan Marcotte在2010年的A List Apart文章中正式创造了“响应式网页设计”一词。

This led to a growth and consolidation of other techniques and technologies alongside media queries, such as flexible images and grids, all of which we’ll cover in this book.

这导致其他技术的发展和整合以及媒体查询，例如灵活的图像和网格，我们将在本书中介绍所有这些内容。

To me, “responsive design” is something of a combination of all these ideas and principles. It’s not just adapting a design to screen sizes, but also to other factors such as color depth, media type (say, a laptop screen, or an eReader), or location.

对我来说，“响应式设计”是所有这些思想和原则的结合。 它不仅使设计适应屏幕尺寸，还适应其他因素，例如色深，介质类型(例如，笔记本电脑屏幕或电子阅读器)或位置。

There are as many schools of thought about how to use responsive design as there are interpretations of it. Some have come and gone, and others have stuck. We won’t cover any in detail explicitly in this book, but we’ll touch upon their practical applications. Let’s quickly cover a few of them now.

关于如何使用响应式设计的思想流派与对它的解释一样多。 有些来来去去，有些则卡住了。 我们不会在本书中明确详细介绍任何内容，但会介绍它们的实际应用。 现在让我们快速介绍其中的一些。

When following the more traditional principle of progressive enhancement, your primary focus is on making the site content available to all users, however simple their device or slow their connection. Then extra features—such as more sophisticated design and functionality—are added for devices that can utilize them.

在遵循更传统的渐进增强原则时，您的主要重点是使网站内容可供所有用户使用，无论他们的设备多么简单或他们的连接速度如何。 然后，为可以利用它们的设备添加了额外的功能，例如更复杂的设计和功能。

The proliferation of mobile browsing has reversed the more traditional path of design. In the past, you started a design on the platform you worked on (typically a computer) and then stripped away style and functionality to support devices with smaller screens or less support for certain features.

移动浏览的激增已经扭转了传统的设计道路。 过去，您是在您使用的平台(通常是计算机)上开始设计的，然后剥离了样式和功能以支持屏幕较小或对某些功能的支持较少的设备。

While graceful degradation is typically applied to the lack of browser support for particular features, you can also think of it more generally. Its principle is that you start with a fully featured version of a site, running on your ideal device and browser, while also ensuring that essential functionality will work for any user on any (supported) device, even if they lose out on nice-to-have features.

尽管正常降级通常是由于缺乏对特定功能的浏览器支持所致，但您也可以更一般地考虑它。 它的原则是，您从一个功能齐全的网站版本开始，在理想的设备和浏览器上运行，同时还要确保基本功能将对任何(受支持的)设备上的任何用户都有效，即使他们在使用-具有功能。

Mobile first is similar to progressive enhancement, but more specific to responsive design. It proposes that you start with your smallest or least capable supported device (typically a phone when the principle was created) and then add functionality and style as you increase the device scale.

移动优先类似于渐进式增强，但更特定于响应式设计。 它建议您从最小或功能最差的受支持设备(通常是创建原理时的电话)开始，然后随着设备规模的增加而添加功能和样式。

As a term, “mobile first” can be confusing, especially to non-designer/developer audiences, giving a skewed impression of the priority that mobile will receive in a project.

用术语来说，“移动优先”可能会造成混淆，尤其是对于非设计人员/开发人员而言，给人的印象是移动将在项目中获得的优先级。

In theory, the practice ensures that smaller devices don’t end up getting second best—that all devices are treated with equal importance.

从理论上讲，该实践可确保较小的设备不会最终获得第二名-所有设备均受到同等重视。

Before starting or enhancing any web-based project, it’s important to know if it’s worthwhile, and to assess the (potential) userbase for all your hard work.

在开始或增强任何基于Web的项目之前，重要的是要知道它是否值得，并评估所有辛勤工作的(潜在)用户群。

If you have an existing website, it may be worth analyzing website traffic to see what types of devices your visitors are using to access your website. If 90% of visitors have consistently visited on a desktop machine, this shows that either your mobile experience is poor, or that your visitors are not big mobile device users. You could embark on extensive research to find out the exact answer, or simply use responsive design techniques to build a mobile-friendly site that may attract new visitors.

如果您已有网站，则可能值得分析网站访问量，以查看访问者正在使用哪些类型的设备访问您的网站。 如果90％的访问者一直在台式机上进行访问，则表明您的移动体验很差，或者访问者不是大型移动设备用户。 您可以进行广泛的研究以找到确切的答案，或者简单地使用响应式设计技术来构建一个易于移动的网站，以吸引新的访问者。

If you’re working on a new project, analyzing the needs of your potential users is equally important. This can be done by using traditional market research techniques, creating simple test sites, or looking at your competitors to build a picture of who your customers will be.

如果您正在从事一个新项目，那么分析潜在用户的需求同样重要。 这可以通过使用传统的市场研究技术，创建简单的测试站点或查看竞争对手以了解客户的身份来实现。

Despite the slow decline in sales, there are still lots of desktop and laptop computers out there, and lots of web browsers running on them. These computers include everything from low-quality (and low-resolution) 11-inch netbooks to high-powered desktops with 28-inch, high-resolution monitors in a variety of proportions and orientations, all of which greatly affect the screen area you have to work with.

尽管销售缓慢下降，但仍然有很多台式机和笔记本电脑，以及运行着许多网络浏览器。 这些计算机包括从低质量(低分辨率)的11英寸上网本到具有28英寸高分辨率显示器的高性能台式机，这些显示器的比例和方向各不相同，所有这些都极大地影响了您拥有的屏幕区域跟...共事。

The percentage of people browsing websites on mobile phones has now reached parity with desktop browsing, so catering for users of mobile browsers is of equal (and likely, growing) importance. For more details on the rise of mobile web browsing, I recommend the Smart Insights report on Mobile Marketing Statistics and Statcounter’s desktop and mobile usage comparison.

现在，在手机上浏览网站的人的比例已达到与台式机浏览相当的水平，因此，满足移动浏览器用户的需求具有同等的重要性(并且可能会不断增长)。 有关移动网络浏览器兴起的更多详细信息，我建议您在“移动营销统计”和Statcounter的台式机和移动设备使用情况比较 报告中找到 Smart Insights 报告 。

On iOS, mobile browsing is generally through just one browser, and the device’s sizes are more consistent.

在iOS上，移动浏览通常仅通过一种浏览器进行，并且设备的尺寸更加一致。

Android has a wide variety of browsers and screen dimensions available. Increasing numbers of devices running mobile operating systems also have high-density screens of varying resolutions.

Android具有多种浏览器和可用的屏幕尺寸。 越来越多的运行移动操作系统的设备还具有分辨率不同的高密度屏幕。

You also need to consider that users are largely browsing with touch and not point-and-click devices, which affects behavior a great deal.

您还需要考虑到用户在很大程度上是使用触摸而不是点击设备来浏览的，这会极大地影响行为。

Tablet sales may be shrinking, but there will still be a significant userbase for the foreseeable future, and you shouldn’t think of tablets as large mobile phones or small desktops. Also, users may be using touch screens or mice to interact with your site.

平板电脑的销售可能正在萎缩，但是在可预见的将来，仍然会有大量的用户群，因此您不应将平板电脑视为大型手机或小型台式机。 此外，用户可能正在使用触摸屏或鼠标与您的网站进行交互。

If handling computers and tablets wasn’t enough for you, there are now hybrid devices, such as Microsoft’s Surface Pro, that can switch between being a computer and a tablet. While each mode can be treated discretely, it’s worth noting that users may switch context while using your site.

如果您还不够使用计算机和平板电脑，那么现在可以使用混合设备(例如Microsoft的Surface Pro)在计算机和平板电脑之间切换。 尽管每种模式可以分开处理，但值得注意的是，用户在使用您的网站时可能会切换上下文。

Most wearables are yet to gain a web browser, but it may happen. In the meantime, it’s still possible to re-purpose parts of your content on wearables, and these will need to be delivered in short bursts with an easy follow-up action.

大多数可穿戴设备尚未获得网络浏览器，但这可能会发生。 同时，仍然可以将部分内容重新分配到可穿戴设备上，并且需要通过简单的后续操作在短时间内提供这些内容。

Smart TVs and related devices such as Apple TV come with simplified web browsers, and users will generally use them for browsing particular sites, but they’re likely to become increasingly popular. TVs have very large screens, often with low resolution, so sites viewed on them need to be clear enough to see properly and also usable from a distance.

智能电视和相关设备(例如Apple TV)配备了简化的Web浏览器，用户通常会使用它们来浏览特定的网站，但它们可能会变得越来越流行。 电视具有非常大的屏幕，通常分辨率较低，因此在电视上观看的站点必须足够清晰才能正确观看并且可以远距离使用。

Really? Yes, really. This is new territory, but an increasing number of cars now have dashboards with access to the internet in some form or another. For the time being, sites rendered on car dashboards will need to present information clearly on a small screen, and be designed not to distract or overwhelm a driver and thus cause an accident. However, many cars now have screens for passengers, who will have much fuller access to the web and content.

真？ 对真的。 这是新领域，但是现在越来越多的汽车具有仪表板，这些仪表板可以某种形式访问互联网。 暂时，在汽车仪表板上绘制的站点将需要在小屏幕上清楚地显示信息，并且其设计不得分散驾驶员的注意力或使驾驶员不知所措，从而引起事故。 但是，现在许多汽车都为乘客提供屏幕，他们将可以更全面地访问网络和内容。

Most modern game consoles spend some of their time connected to the internet, and some of that time with a web browser. This is typically for media consumption and social networks. Browsers on these devices will likely be limited, and a physical keyboard may not be available. For home consoles, design principles from TV will apply, and for handhelds, a limited mobile experience.

大多数现代游戏机的一部分时间用于连接互联网，另一部分时间用于网络浏览器。 这通常用于媒体消费和社交网络。 这些设备上的浏览器可能会受到限制，并且物理键盘可能不可用。 对于家用游戏机，将采用电视的设计原则，而对于掌上电脑，则是有限的移动体验。

In summary, you can’t predict how and where anyone will view your website, so build it to be adaptable, flexible, and responsive.

总之，您无法预测任何人将如何浏览您的网站以及在何处浏览您的网站，因此将其构建为适应性强，灵活且响应Swift的网站。

Print? Isn’t this a web design book? Yes, but print versions of your web pages will still be frequently accessed, whether for actual physical printing or for rendering your content on offline readers such as Instapaper or Pocket. For certain content, “print” is still relevant.

打印？ 这不是网页设计书吗？ 是的，但是仍然可以经常访问网页的打印版本，无论是进行实际的物理打印还是在离线阅读器(例如Instapaper或Pocket)上呈现内容。 对于某些内容，“打印”仍然有意义。

My recently released book Jump Start Responsive Web Design, is available now on SitePoint. It aims to get you started understanding, and using, the suite of CSS and HTML tools available for responding to this new world of devices. It’s highly practical, with plenty of examples throughout, covering:

我最近发行的书《快速启动响应式Web设计》现已在SitePoint上可用。 它旨在使您开始理解和使用可用于响应这一新设备世界CSS和HTML工具套件。 这是高度实用的，在整个过程中都有很多示例，包括：

The Meaning and Purpose of Responsive Web Design

响应式网页设计的意义和目的

The Building Blocks of Responsive Design

响应式设计的基础

Better Responsive Structures with Grid Systems

网格系统具有更好的响应结构

Responsive Text

回应文字

Responsive Images and Video

响应式图像和视频

Responding to User Context

响应用户上下文

My book is suitable for beginner-level designers and developers with understanding of HTML and CSS. Some JavaScript experience is useful for the later chapters.

我的书适合具有HTML和CSS知识的初学者设计人员和开发人员。 一些JavaScript经验对于后面的章节很有用。

翻译自: https://www.sitepoint.com/the-meaning-and-purpose-of-responsive-web-design/

响应式网页设计