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

响应式网页设计

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.