响应式网页设计_响应式网页设计–如何使网站在手机和平​​板电脑上看起来不错

响应式网页设计

In the rapidly evolving landscape of connected devices, responsive web design continues to be crucial in web development.

在连接设备Swift发展的格局中，自适应Web设计在Web开发中仍然至关重要。

Not long ago the term "responsive web design" was non-existent. But today, most of us have had to adopt it to some extent.

不久前，“响应式网页设计”一词不复存在。 但是今天，我们大多数人不得不在某种程度上采用它。

According to Statistica, as of 2019, 61% of all Google search visits take place on a mobile device. In September of 2020 Google will change its search algorithm to prioritize mobile friendly websites.

根据Statistica的数据 ，截至2019年，所有Google搜索访问中有61％发生在移动设备上。 2020年9月， Google将更改其搜索算法，以优先考虑移动友好型网站。

In this post I'll cover the following:

在这篇文章中，我将介绍以下内容：

• What is responsive web design?
  什么是响应式网页设计？
• The viewport meta tag and what it does
  视口元标记及其作用
• Effective techniques used in responsive web design to accommodate mobile and tablet devices
  响应式网页设计中使用的有效技术，以适应移动设备和平板电脑设备
• Tools to help simulate and monitor mobile and tablet user experience
  帮助模拟和监控手机和平板电脑用户体验的工具

什么是响应式网页设计？ (后退) (What is Responsive Web Design? (RWD))

Responsive web design is an approach that focuses on a website user’s environment. The user's environment will depend on which device they have connected to the internet.

响应式网页设计是一种专注于网站用户环境的方法。 用户的环境将取决于他们连接到互联网的设备。

There are many device characteristics that provide opportunities for user-centric focus. Some of these include:

有许多设备特性为以用户为中心的关注提供了机会。 其中一些包括：

• network connection
  网络连接
• screen size
  屏幕尺寸
• type of interaction (touch screens, track pads)
  互动类型(触摸屏，触控板)
• graphic resolution.
  图形分辨率。

Before responsive web design was popular, many companies managed an entirely separate website that received traffic forwarded based on the user-agent.

在响应式Web设计流行之前，许多公司管理着一个完全独立的网站，该网站接收基于用户代理转发的流量。

But in responsive web design the server always sends the same HTML code to all devices, and CSS is used to alter the rendering of the page on the device.

但是在响应式Web设计中，服务器始终向所有设备发送相同HTML代码，并且CSS用于更改设备上页面的呈现方式。

Regardless of the two strategies above, the first step in creating a website for phone or tablet is to ensure the browser knows the intention. This is where the viewport meta tag comes into play.

无论采用上述两种策略，创建用于手机或平板电脑的网站的第一步都是要确保浏览器知道意图。 这是视口meta标签起作用的地方。

视口元标记可识别移动网站 (The Viewport Meta Tag to Identify a Mobile Website)

The meta viewport tag instructs the browser how to adjust the page to the width of each device.

meta视口标签指示浏览器如何将页面调整为每个设备的宽度。

When the meta viewport element is absent, mobile browsers will display web pages with default desktop settings. This results in a seemingly zoomed out, unresponsive experience.

缺少meta视口元素时，移动浏览器将显示具有默认桌面设置的网页。 这导致看似缩小，无响应的体验。

Below is a standard implementation:

下面是一个标准实现：

Now that the browser knows what's going, we can utilize popular techniques to make our website responsive. 🙌

既然浏览器知道发生了什么，我们就可以利用流行的技术来使我们的网站具有响应能力。 🙌

不同屏幕尺寸和方向CSS媒体查询 (CSS Media Queries for Different Screen Sizes and Orientations)

If you're new to responsive web design, media queries are the first, most important CSS feature to learn. Media queries allow you to style elements based on viewport width. One popular CSS strategy is to write mobile styles first and build on top of them with more complex, desktop specific styles.

如果您不熟悉响应式Web设计，则媒体查询是第一个要学习的最重要CSS功能。 媒体查询使您可以根据视口宽度来设置元素的样式。 一种流行CSS策略是首先编写移动样式，然后在其之上构建更复杂的桌面特定样式。

Media queries are an important part of responsive web design commonly used for grid layouts, font sizes, margins, and padding that differ between screen size and orientation.

媒体查询是响应式Web设计的重要组成部分，通常用于屏幕大小和方向之间不同的网格布局，字体大小，边距和填充。

Below is an example of a common use case of mobile first styling in which a column is 100% width for smaller devices, but in larger viewports is 50%.

以下是移动优先样式的常见用例示例，其中对于较小的设备，列的宽度为100％，但是在较大的视口中，列的宽度为50％。

The code above is a simple example, but what it's actually doing is pretty interesting.

上面的代码是一个简单的示例，但是实际上它是很有趣的。

1. In considering mobile first, the "column" element is set to have a width of 100%;
   在考虑移动优先时，将“列”元素的宽度设置为100％；

2. By using a min-width media query, we define rules specifically for viewports with a minimum width of 600px (viewports wider than 600px). So, for viewports wider than 600px, our column element will have a width that is 50% of its parent.

   通过使用min-width媒体查询，我们专门为最小宽度为600px (大于600px视口)的视口定义规则。 因此，对于大于600px视口，我们的column元素的宽度为其父元素的50％。

Although media queries are essential for responsive web design, many other new CSS features are also becoming widely adopted and supported in browsers. Flexbox is one of these new, important CSS feature in terms of responsive web design.

尽管媒体查询对于响应式Web设计是必不可少的，但许多其他新CSS功能也正在被浏览器广泛采用和支持。 就响应式网页设计而言，Flexbox是这些重要CSS新功能之一。

什么是Flexbox？ (What is Flexbox?)

You might be wondering - "what does Flexbox do"? The better question is - "what can't Flexbox do"? What's the easiest way to vertically center with CSS? Flexbox. How do you create a responsive grid layout? Flexbox. How can we achieve global peace? Flexbox.

您可能想知道-“ Flexbox会做什么”？ 更好的问题是-“ Flexbox不能做什么”？ 使用CSS垂直居中的最简单方法是什么？ Flexbox。 如何创建自适应网格布局？ Flexbox。 我们如何实现全球和平？ Flexbox。

The Flexbox Layout (Flexible Box) module provides a more efficient way to lay out, align and distribute space among items in a container, even when their size is dynamic (hence the word “flex”).

Flexbox布局(Flexible Box)模块提供了一种更有效的方式来布置，对齐和分配容器中各个项目之间的空间，即使它们的大小是动态的(因此也称为“ flex”)。

In the below example we combine media queries as explained above to create a responsive grid.

在下面的示例中，我们如上所述结合媒体查询来创建一个响应式网格。

We accomplish the following with this code:

我们使用此代码完成以下操作：

1. Establish a flexbox layout with display: flex in our main container element.

   使用display: flex建立flexbox布局display: flex main容器元素中的display: flex 。

2. Style for mobile first. We set the main element to flex-wrap: wrap which allows child elements to wrap within our flexbox layout as illustrated below in figure 1. We set flex-basis: 100% on our div elements to ensure they encompass 100% of the parent width in the flexbox layout (figure 1).

   移动优先的样式。 我们将main元素设置为flex-wrap: wrap ，它允许子元素在我们的flexbox布局中进行包装，如下图1所示。我们将flex-basis: 100%设置flex-basis: 100% div元素的100％，以确保它们包含父宽度的100％在flexbox布局中(图1)。

3. Style for larger devices like tablets and desktop. We utilize a media query similar to our example in the previous section to set our container main element to flex-wrap: nowrap. This makes sure that child elements do not wrap and that they maintain a column within a row type of layout. By setting div to flex-basis: 33% within the media query - we establish columns that are 33% the width of the parent.

   适用于平板电脑和台式机等大型设备的样式。 我们利用与上一节中的示例类似的媒体查询将容器main元素设置为flex-wrap: nowrap 。 这样可以确保子元素不会换行，并确保它们在布局的行类型内保持一列。 通过将div设置为flex-basis: 33%在媒体查询中flex-basis: 33% -我们建立的列的宽度为父级宽度的33％。

4. In this example the magic would appear in larger devices with our combined media query and flexbox rules. Because we defined display: flex, and because we didn't override the rule within the media query, we have a flexbox layout for mobile, tablet, and desktop. The media query flex-basis: 33% and inherited display: flex rules will give us a recognizable flexbox layout as seen in figure 2. In the past, to achieve this column type of layout, we would need to do some serious heavy lifting and write tangles of CSS.

   在此示例中，结合了媒体查询和Flexbox规则的魔力将出现在更大的设备中。 因为我们定义了display: flex ，并且因为我们没有在媒体查询中覆盖规则，所以我们为手机，平板电脑和台式机提供了一个弹性框布局。 媒体查询flex-basis: 33%并继承了display: flex规则将为我们提供可识别的flexbox布局，如图2所示。过去，要实现这种列类型的布局，我们需要做一些繁重的工作，写缠结CSS。

Flexbox provides a great way of achieving varying, fluid layouts. In some cases we might not have such freedom in vertical space. We may need to fit an element within a fixed height. In this situation, we have another technique at our disposal - horizontal scroll.

Flexbox提供了一种实现各种流畅布局的好方法。 在某些情况下，我们在垂直空间可能没有这种自由。 我们可能需要将元素放置在固定高度内。 在这种情况下，我们可以使用另一种技术-水平滚动。

使用溢出滚动进行水平滚动 (Horizontal Scrolling with Overflow Scroll)

There may come a time that you have content overflowing the viewport without a graceful way of handling it. Behold... overflow scroll to the rescue. 🦸

有时可能会有内容溢出视口而又没有优雅的处理方式的情况。 看吧...溢出滚动到救援。 🦸

Common uses for this technique include scrollable menus and tables. Below is an example of a scrollable menu.

此技术的常见用法包括可滚动菜单和表格。 以下是可滚动菜单的示例。

Responsive Web Design RWD Responsive menu Overflow scroll example This is a lot of content! Yes we have another item 响应式Web设计 RWD 响应式菜单 溢出滚动示例 这是很多内容！ 是的， 我们 还有 另一个 项目

How'd you do that!? Let's take a deeper dive.

你是怎么做到的？ 让我们更深入地潜水。

• overflow-y: scroll is the key ingredient of this recipe. By specifying it child elements will overflow the horizontal axis with scrolling behavior.

  overflow-y: scroll是此食谱的关键要素。 通过指定它，子元素将通过滚动行为使水平轴溢出。

• Not so fast! Although you may think overflow-y would be enough, we have to also tell the browser not to wrap the child elements with white-space: nowrap 🤷

  没那么快！ 尽管您可能会认为overflow-y就足够了，但是我们还必须告诉浏览器不要用white-space: nowrap包装子元素white-space: nowrap nowrap🤷

Now that we have a few RWD layout techniques up our sleeve, let's take a look at elements that pose challenges specific to their visual nature - images and video.

现在我们已经掌握了一些RWD布局技术，下面让我们看一下对它们的视觉特性提出特定挑战的元素-图像和视频。

响应式图像 (Responsive Images)

By using modern image tag attributes we can accommodate a range of devices and resolutions. Below is an example of a responsive image.

通过使用现代图像标签属性，我们可以适应各种设备和分辨率。 以下是响应式图像的示例。

<style>
  img {
    max-width: 100%;
  }
</style>

<picture>
  <source type="image/webp" srcset="https://my-image.com/my-image-100.webp 1x, https://my-image.com/my-image-200.webp 2x">
  <source type="image/png" srcset="https://my-image.com/my-image-100.png 1x, https://my-image.com/my-image-200.png 2x">
  <img alt="my image" src="https://my-image.com/my-image-200.png" loading="lazy" width="100" height="100">
</picture>

This is doing a lot of things. Let's break it down:

这正在做很多事情。 让我们分解一下：

1. By setting max-width: 100% the image will scale up or down based on its container width.

   通过设置max-width: 100% ，图像将根据其容器宽度放大或缩小。

2. By using a combination of picture, source, and img tags we are actually only rendering one image and are only loading the best fitting image based on the user's device.

   通过结合使用picture ， source和img标签，我们实际上仅渲染一个图像，并且仅基于用户的设备加载最合适的图像。

3. WebP is a modern image format that provides superior compression for images on the web. By utilizing source we can reference a WebP image to use for browsers that support it, and another source tag to reference a PNG version of the images that don't support WebP.

   WebP是一种现代图像格式，可为Web上的图像提供出色的压缩。 通过利用source我们可以引用WebP图像以用于支持它的浏览器，而另一个source代码标签可以引用不支持WebP的图像的PNG版本。

4. srcset is used to tell the browser which image to use based on the device's resolution.

   srcset用于根据设备的分辨率告诉浏览器要使用哪个图像。

5. We establish native lazy loading by utilizing the loading="lazy" attribute / value pair.

   我们通过使用loading="lazy"属性/值对来建立本地延迟加载 。

自适应视频 (Responsive Video)

Responsive video is another subject that has inspired a large number of articles and documentation.

自适应视频是另一个启发了大量文章和文档的主题。

One key strategy to establish responsive images, video, iframes and other elements involves the use of aspect-ratio. The aspect ratio box is not a new technique and quite a useful tool to have up your sleeve as a web developer.

建立响应式图像，视频，iframe和其他元素的一种关键策略涉及到纵横比的使用。 长宽比框并不是一项新技术，而是使您成为Web开发人员的有用工具。

This article provides a solid demonstration about how to achieve "fluid" width videos. Let's take a look at the code and break it down.

本文提供了有关如何实现“流畅”宽度视频的扎实演示 。 让我们看一下代码并将其分解。

<style>
  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }

  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

In this example we have a YouTube video embed as an iframe and a div container with videoWrapper class. This code is doing a lot... let's dig in.

在此示例中，我们将YouTube视频嵌入为iframe和带有videoWrapper类的div容器。 这段代码做了很多...让我们深入研究。

• position: relative on the container element allows child elements to utilize absolution positioning relative to it.

  position: relative对于容器元素的位置允许子元素利用相对于其的绝对位置。

• height: 0 combined with padding-bottom: 56.25% is the key ingredient here which establishes a dynamic behavior, enforcing a 16:9 aspect ratio.

  height: 0和padding-bottom: 56.25%是关键要素，可建立动态行为，并实现16:9纵横比。

• position: absolute, top: 0 and left: 0 set on the iframe creates a behavior in which the element positions itself absolutely relative to its parent... sticking it to the top left.

  在iframe上设置的position: absolute ， top: 0和left: 0会创建一种行为，在该行为中，元素将自身相对于其父元素绝对定位...将其粘贴到左上角。

• And finally width and height of 100% makes the child, iframe element 100% of its parent. The parent, .videoWrapper takes full control of establishing this aspect ratio layout.

  最后，宽度和高度为100％会使子级iframe元素成为其父级的100％。 父.videoWrapper完全控制建立此宽高比布局。

I know... it's a lot. There's more we can do to make video and images look the best on phones and tablets. I'd encourage research on those topics independently in addition to this.

我知道...很多 我们还可以做更多的工作，以使视频和图像在手机和平​​板电脑上看起来最好。 除此以外，我鼓励对这些主题进行独立研究。

Okay, now that we're masters of responsive web design, how can we test what we've done? Fortunately, we have a number of tools to simulate and monitor user experience on a variety of devices.

好的，既然我们是响应式Web设计的大师，那么我们如何测试已经完成的工作？ 幸运的是，我们有许多工具可以模拟和监视各种设备上的用户体验。

模拟和监视响应式网站的工具 (Tools to Simulate and Monitor Responsive Websites)

There are a variety of useful tools to help us create websites with responsive web design. Below are a couple that I find especially useful.

有多种有用的工具可帮助我们创建具有响应式网页设计的网站。 以下是我认为特别有用的一对。

Chrome DevTools移动仿真 (Chrome DevTools Mobile Emulation)

Chrome's DevTools provides mobile emulation of a range of tablet and mobile devices. It also provides a "responsive" option which allows you to define a custom viewport size.

Chrome的DevTools提供了一系列平板电脑和移动设备的移动仿真。 它还提供了“响应式”选项，使您可以定义自定义视口大小。

使用Foo监控移动网站的性能 (Monitoring Mobile Website Performance with Foo)

Lighthouse is an open-source tool that provides a way of analyzing website performance specific to a device.

Lighthouse是一个开源工具，提供了一种分析特定于设备的网站性能的方法。

Foo uses Lighthouse behind the scenes to monitor website performance and provides feedback for analysis. You can setup monitoring for both desktop and mobile devices to get continuous feedback about how responsive your website is.

Foo在后台使用Lighthouse监视网站性能并提供反馈以进行分析 。 您可以为台式机和移动设备设置监视，以获取有关网站响应速度的连续反馈。

For example, a Lighthouse report will callout images that are improperly loaded based on device.

例如，一个Lighthouse报告将标注基于设备未正确加载的图像。

结论 (Conclusion)

Responsive web design will continue to rapidly evolve, but if we stay on top of current trends we can provide the best experience for our users. I hope these tools and techniques are helpful!

自适应网页设计将继续快速发展，但是如果我们紧贴当前趋势，我们将为用户提供最佳体验。 希望这些工具和技术对您有所帮助！

Not only will our website users benefit from a versatile design but also search engines will rank our web pages higher.

我们的网站用户不仅将从通用设计中受益，而且搜索引擎还将使我们的网页排名更高。

翻译自: https://www.freecodecamp.org/news/responsive-web-design-how-to-make-a-website-look-good-on-phones-and-tablets/

响应式网页设计