响应式网页设计简史-CSDN博客

Websites are like a canvas. You have complete freedom to design them the way you want. But unlike a painting, not all people will view your site the way you want.

网站就像一块画布。您可以完全自由地按自己的方式设计它们。但是，与绘画不同，并非所有人都会以您想要的方式查看您的网站。

The internet is huge and old, and devices are getting smaller and more compact. Now you have to adapt your painting for a smaller canvas without losing its beauty.

互联网既庞大又古老，设备越来越小，越来越紧凑。现在，您必须将画作修改为较小的画布，而又不会失去其美感。

This is where Responsive Design comes in. Websites can now look just as good on a phone as they do on a big-screen TV. But it wasn't always this way. It took developers years of experimentation to reach this point. And we're still making improvements each day.

这就是响应式设计的用武之地。网站现在在电话上的外观与在大屏幕电视上的外观一样好。但这并不总是这样。开发人员花了多年的实验才能达到这一点。而且我们仍在每天改进。

In this article, we're going to dive into the history of responsive web design, and see how websites have evolved over time.

在本文中，我们将深入探讨自适应Web设计的历史，并了解网站如何随着时间而发展。

互联网的早期 (The Early Days of the Internet)

Remember the early days of internet, when any website seemed great? Just getting your own page live on the web was a grand achievement. Even if it was just a Geocities page or an Angelfire page. You'd show it off to your friends. And it was one of the best feelings in the world.

还记得互联网的早期，那时候任何网站看起来都很棒吗？仅在网络上发布您自己的页面是一项巨大的成就。即使只是Geocities页面或Angelfire页面。您可以将其展示给您的朋友。这是世界上最好的感觉之一。

The good news for designers: they knew pretty much exactly how their websites would look. Everyone was accessing the web through desktop computers with only a handful of resolutions and aspect ratios. This meant that designers could place things anywhere on the screen they wanted without worrying too much about other screen sizes.

对设计师来说是个好消息：他们几乎完全知道他们网站的外观。每个人都只能通过几台分辨率和宽高比的台式计算机访问网络。这意味着设计师可以将东西放在想要的屏幕上的任何位置，而不必担心其他屏幕尺寸。

Back then, it was common to see websites that forced you to use a desktop browser. Re-designing an entire website to work on fringe screen sizes was a difficult task, and many companies didn't want to invest the effort.

那时，经常看到强迫您使用桌面浏览器的网站。重新设计整个网站以适应边缘屏幕尺寸是一项艰巨的任务，许多公司都不愿为此付出任何努力。

CSS之前的生活 (Life Before CSS)

For the past 20 years or so, most developers have gotten their start with web development. And that meant learning basic HTML, the basic building blocks websites.

在过去的20年左右的时间里，大多数开发人员都从Web开发入手。这意味着要学习基本HTML，这是构建网站的基本要素。

In the most basic terms, HTML elements are rectangular boxes which stack over each other by default. There wasn't that much you could do with a few boxes containing text and images.

用最基本的术语来说，HTML元素是默认情况下彼此堆叠的矩形框。您可以用几个装有文本和图像的盒子做很多事情。

The most basic HTML tags were all we could use. They included h1 to h6 tags, image tags, lists, tables, paragraphs and many tags for even the most basic stuff (which are now done using CSS).

最基本HTML标签就是我们可以使用的所有标签。它们包括h1到h6标签，图像标签，列表，表格，段落以及许多标签，甚至包括最基本的东西(现在都使用CSS完成)。

A basic HTML page would look like this:

基本HTML页面如下所示：

<html>
<head>
  <title>FreeCodeCamp</title>  
</head>
<body>
  <h1>FreeCodeCamp</h1>
    <img src="logo.jpg" height="150" width="150" align="right">
    <p>Text goes here</p>
  <p>Text goes here</p>
</body>
</html>

There were no structured or uniform ways of styling HTML elements. But luckily, HTML gave you some customization through special tags.

没有样式化或统一的样式化HTML元素样式。但幸运的是，HTML通过特殊标签为您提供了一些自定义功能。

All these tags even exist today, though some of them were deprecated in HTML5 because they were too basic. For example, there was a <marquee> tag, a tag for creating sliding text, images and other HTML elements.

所有这些标记甚至在今天都存在，尽管其中一些标记因为太基础而已在HTML5中弃用。例如，有一个<marquee>标记，一个用于创建滑动文本，图像和其他HTML元素的标记。

You can achieve the same effect can now through CSS alone. But at that time, developers had to create separate tags for every single functionality. (Fun Fact: Google has an easter egg if you search "marquee tag." You get to see it in action.)

现在，仅通过CSS就可以达到相同的效果。但是那时，开发人员必须为每个功能创建单独的标签。 ( 有趣的事实 ：如果您搜索“字幕标记”，Google就会提供一个复活节彩蛋。您会看到它的实际应用。)

Thus, designers needed a structured way of styling elements. It needed to be flexible and completely customizable.

因此，设计人员需要一种结构化的样式样式元素。它需要灵活且完全可定制。

This led to the creation of Cascading Style Sheets (CSS), a standard way of styling HTML elements.

这导致了级联样式表(Cascading Style Sheets，CSS)的创建，这是样式化HTML元素的一种标准方式。

Cascading style sheets or CSS is a way of styling any HTML element. They have a set of pre-defined properties which can be applied to any HTML element. These style can be embedded in the same HTML page or used as an external .css file

级联样式表或CSS是样式化任何HTML元素的一种方式。它们具有一组可以应用于任何HTML元素的预定义属性。这些样式可以嵌入在同一HTML页面中，也可以用作外部.css文件

It was a major milestone in web design. Now designers had an option to change each and every property of HTML elements and place them wherever they wanted.

这是网页设计的一个重要里程碑。现在，设计人员可以选择更改HTML元素的每个属性，并将它们放置在所需的位置。

屏幕开始收缩时 (When Screens Started Shrinking)

Now that designers had complete control over the webpage, they had to make sure it looked good on all screen sizes.

现在，设计人员已经完全控制了该网页，因此他们必须确保该网页在所有屏幕尺寸上均显示良好。

Desktops are still popular today, but a majority of people also use hand-held mobile devices to surf the web. Now designers have less width but a more usable height, as scrolling is very convenient on touch-screen devices compared to desktops.

台式机今天仍然很流行，但是大多数人还使用手持移动设备上网。现在，设计师的宽度减小了，但高度却增加了，因为与台式机相比，触摸屏设备上的滚动非常方便。

Websites now had to incorporate Responsive Web Design:

网站现在必须包含响应式网页设计：

Responsive web design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.

响应式网页设计是一种网页设计方法，可使网页在各种设备以及窗口或屏幕尺寸上都能很好地呈现。

The most common way of dealing with smaller screens is a Sidebar. A sidebar is like a drawer where links and other not-so-important stuff is kept. Designers just transfer all secondary stuff to the sidebar so that the webpage looks clean.

处理较小屏幕的最常见方法是补充工具栏 。侧边栏就像一个抽屉，其中保留了链接和其他不太重要的内容。设计人员只需将所有辅助内容转移到侧边栏，以使网页看起来干净。

This is an overused method, however, and sidebars weren't originally intended for this purpose.

但是，这是一种过度使用的方法，并且侧边栏最初并不是为此目的而设计的。

Prior to this trend, the <frameset> and <frame> tags were very popular, as they allowed designers to embed external web pages.

在此趋势之前， <frameset>和<frame>标签非常流行，因为它们允许设计人员嵌入外部网页。

But unlike the now popular <iframe> tags, these tags were highly unresponsive. This was because they didn't adapt to different screen sizes, and tried to maintain their layout even on smaller screens which looked terrible.

但是与现在流行的<iframe>标签不同，这些标签React迟钝。这是因为它们无法适应不同的屏幕尺寸，并试图保持其布局，即使在看起来很糟糕的较小屏幕上也是如此。

<frameset rows="100,*">
  <frame src="header.html"/>
  <frameset cols="33%,33%,*">Nested frameset
    <frame src="subframe1.html"/>
    <frame src="subframe2.html"/>
    <frame src="subframe3.html"/>
  </frameset>
</frameset>

The output would look completely fine on desktops but broke on mobile devices.

在台式机上，输出看起来完全正常，但在移动设备上却中断了。

过渡到响应式设计 (Transition to Responsive Design)

The old, huge websites with thousands of pages were faced with a dilemma: to be responsive or not to be.

拥有成千上万个页面的大型旧网站面临着一个难题：响应还是不响应。

Any web designer knows that having to make a transition from a larger to a smaller screen is the worst. Your canvas is getting smaller, whereas the painting remains the same. Either you delete some parts of your painting or make it adapt.

任何网页设计师都知道，必须从较大的屏幕过渡到较小的屏幕是最糟糕的。您的画布越来越小，而绘画却保持不变。您可以删除绘画的某些部分或使其适应。

Since there were no guidelines for being responsive back in the day, web designers often used naive ways of putting elements on various parts of the screen.

由于没有关于响应时间的指南，因此网页设计师经常使用幼稚的方式将元素放置在屏幕的各个部分。

For example, using <table> tags.

例如，使用<table>标签。

Using a table tag for a layout was a bad practice for various reasons, such as:

由于各种原因，使用表格标签进行布局是一种不好的做法，例如：

Tables are not meant for layouts. They are for showing Tabular data in a compact form.
表格不适合布局。它们用于以紧凑形式显示表格数据。
Table tags, just like frameset tags, are not responsive, and they don't adapt to smaller screen sizes.
表格标签和框架集标签一样，没有响应能力，因此无法适应较小的屏幕尺寸。
The table can't be rendered until all its cells are loaded, whereas using div tags for a layout allows them to load independently.
在加载所有单元格之前，无法渲染该表，而使用div标签进行布局允许它们独立加载。

一些大型网站的案例研究 (Case Study of Some Large Websites)

Let us see how some large websites dealt with this dilemma. We'll take YouTube, for example.

让我们看看一些大型网站如何处理这一难题。以YouTube为例。

You have likely seen the desktop version of YouTube. It's full of stuff – a header on top, a sidebar on the left, videos stacked around each other, and a footer. Now, most of these things are quite unnecessary for mobile users as they can't utilize them properly.

您可能已经看过YouTube的桌面版。它充满了所有内容-顶部的标题，左侧的侧边栏，彼此堆叠的视频以及页脚。现在，大多数这些事情对于移动用户来说是不必要的，因为他们无法正确利用它们。

YouTube might have chosen responsive design, but that would mean hiding these extra elements somewhere.

YouTube可能选择了自适应设计，但这意味着将这些多余的元素隐藏在某个地方。

Anyone who has designed a website knows how important website performance is. Each and every thing you put on a page slows it down. So, in YouTube's case, it would be a waste to fetch them from server only to hide them.

设计网站的任何人都知道网站性能的重要性。您放在页面上的每件事都会使其变慢。因此，就YouTube而言，仅从服务器中获取它们以隐藏它们是一种浪费。

And YouTube is old, and so is its design. Modifying already written code has a high chance of breaking stuff that is already working. So instead, YouTube used what is known as Dynamic Serving.

YouTube很老，它的设计也很古老。修改已编写的代码很有可能破坏已经起作用的内容。因此，YouTube使用了所谓的动态服务 。

Dynamic Serving is a method where the server checks whether the device requesting the webpage is a desktop or a mobile. Then it dynamically serves the webpage depending on the type of device.

动态服务是服务器检查请求网页的设备是台式机还是移动机的一种方法。然后，它会根据设备类型动态地为网页提供服务。

This method is easy to implement, as designers don't have to deal with different screen sizes. But it's also often discouraged because if not properly configured it can devastate SEO because of duplicate content issues.

这种方法易于实现，因为设计人员不必处理不同的屏幕尺寸。但它也经常不受欢迎，因为如果配置不正确，它可能会由于重复的内容问题而破坏SEO。

These mobile versions are often served through a different subdomain like m.<site-name>.com to distinguish them.

这些移动版本通常通过m。<site-name> .com之类的其他子域提供，以区分它们。

This method was used by Facebook, Wikipedia, and other huge websites, for similar reasons. Responsive Web Design is an ideal solution which is difficult to implement.

出于类似原因，Facebook，Wikipedia和其他大型网站也使用了这种方法。响应式Web设计是一种难以实现的理想解决方案。

Some other sites decided to not be responsive but to build a mobile app instead. This was a reasonable approach considering that mobile apps were future proof. But installing a mobile app required some level of trust, as they had much greater access than web apps.

其他一些网站决定不响应，而是构建一个移动应用程序。考虑到移动应用程序可以用于未来，这是一种合理的方法。但是安装移动应用程序需要一定程度的信任，因为它们比Web应用程序具有更大的访问权限。

Also, the problem with native mobile apps was that they were expensive to make, as they had to be built for multiple platforms with the exact same design and functionality. The web is a pretty mature platform and thus has greater scope than mobile apps.

此外，本地移动应用程序的问题在于它们的制作成本很高，因为它们必须为具有完全相同的设计和功能的多个平台构建。网络是一个相当成熟的平台，因此比移动应用程序具有更大的范围。

响应式网页设计策略 (Responsive Web Design Strategy)

These were the problems faced by sites which already existed. For new websites Responsive design became a must in order to compete with other websites.

这些是已经存在的站点所面临的问题。对于新网站，响应式设计已成为与其他网站竞争的必须条件。

Google also recently introduced mobile-first indexing which means that it prefers mobile-friendly websites in search on mobile devices, creating one more reason adapt.

谷歌最近还推出了移动优先索引 ，这意味着它在移动设备上搜索时优先选择适合移动设备的网站，从而创造了另一个原因。

行动优先 (Mobile-first approach)

Suppose you have a suitcase with some stuff in it. would it be easier to transfer things from a smaller suitcase to a larger one, or from a larger to a smaller?

假设您有一个装满东西的手提箱。将物品从较小的手提箱转移到较大的手提箱，或从较大的手提箱转移至较小的手提箱会更容易吗？

In the mobile-first approach, the website is made to be compatible with mobile first, and then see how things change when transitioning to a larger screen.

在以移动设备优先的方式中，首先使网站与移动设备兼容，然后查看过渡到更大屏幕时情况如何变化。

One misconception around this approach is that people think that it's mobile-only. But that's not correct – mobile-first doesn't mean designing only for mobile. It is just a safe and easy approach to start with.

关于这种方法的一个误解是，人们认为它仅适用于移动设备。但这是不正确的-移动优先并不意味着仅针对移动进行设计。这只是一种安全，容易的方法。

Since the available space on a mobile screen is much smaller compared to a desktop, it has to be used for central content.

由于与台式机相比，移动屏幕上的可用空间要小得多，因此必须将其用于中心内容。

Also, mobile users switch pages much more frequently, so it is important to grab their attention immediately. Since there are fewer elements on the page and focus is put more on content, this results in a cleaner web page.

此外，移动用户更频繁地切换页面，因此立即吸引他们的注意很重要。由于页面上的元素较少，并且重点放在内容上，因此可以使网页更整洁。

网页设计的未来 (The Future of Web Design)

The web is growing at an incredible rate. People are shifting their businesses online, and competition is stiffer than before.

网络正以惊人的速度增长。人们正在将业务在线转移，竞争比以往更加激烈。

There is also a discussion as to whether businesses actually need a mobile app anymore. With growth of Progressive Web Apps (PWAs) and various web API's, the web is much more powerful than before. And most native features like notifications, location, caching, and offline compatibility are now possible with PWAs.

还讨论了企业是否真的需要移动应用程序了。随着渐进式Web应用程序(PWA)和各种Web API的增长，网络比以前更加强大。现在，大多数本地功能(如通知，位置，缓存和脱机兼容性)都可以通过PWA实现。

A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript.

渐进式Web应用程序是通过Web交付的一种应用程序软件，使用包括HTML，CSS和JavaScript在内的常见Web技术构建。

The process of making a PWA is very simple, but that is beyond the scope as well as the central idea of this article. Let us focus more on what we are getting with PWAs.

制作PWA的过程非常简单，但这超出了本文的范围和核心思想。让我们更多地关注PWA带来的好处。

You might have noticed the "Add to Home Screen" button in the chrome browser above. For normal websites, it's nothing more than a shortcut icon on the home screen. But if the website is a PWA, you can do a lot of really cool stuff.

您可能已经注意到上面的Chrome浏览器中的“添加到主屏幕”按钮。对于普通网站，它只不过是主屏幕上的快捷方式图标。但是，如果网站是PWA，则可以做很多非常酷的事情。

You don't need to install a web app for it to function as a PWA, but that makes it feel more like a native app. Also, a PWA can run as a standalone web app without the chrome address bar on top. This again gives it a more app-like feel.

您无需安装Web应用程序即可用作PWA，但这会使它看起来更像是本机应用程序。另外，PWA可以作为独立的Web应用程序运行，而顶部没有chrome地址栏。这再次给人一种更像应用程序的感觉。

PWAs work on Desktops too, which makes them a perfect candidate for any new app. They can run on any platform that has a web browser, they are safe, and they have all the basic native features.

PWA也可以在台式机上工作，这使其成为任何新应用程序的理想之选。它们可以在具有Web浏览器的任何平台上运行，安全并且具有所有基本本机功能。

Still, many features not already installed or available can pose a security threat, as opening a website is considered much safer than installing an app. Therefore, some highly native features still require a native app.

尽管如此，许多未安装或不可用的功能仍可能构成安全威胁，因为打开网站被认为比安装应用程序安全得多。因此，某些高度本机的功能仍然需要本机应用程序。

Just to be clear: PWAs are not a replacement for native apps. Native apps will continue to exist. PWAs are just a simpler way to achieve those features without actually building a mobile app.

需要明确说明的是：PWA不能替代本机应用程序。本机应用程序将继续存在。 PWA只是实现这些功能的一种简单方法，而无需实际构建移动应用程序。

预测网络的未来 (Predicting the Future of the Web)

As we've seen, technology continues to improve, and the internet continues to become more accessible as the number of users grows exponentially.

如我们所见，随着用户数量呈指数增长，技术不断发展，互联网继续变得越来越容易访问。

The shift of web design trends leans more towards performance and user experience. And will continue to do so.

Web设计趋势的转变更倾向于性能和用户体验。并将继续这样做。

We are also heading towards Web 3.0:

我们还将朝着Web 3.0迈进：

Web 3.0 is the next generation of Internet technology that heavily relies on the use of machine learning and artificial intelligence (AI). It aims to create more open, connected, and intelligent websites and web applications, which focus on using a machine-based understanding of data.

Web 3.0是下一代Internet技术，在很大程度上依赖于机器学习和人工智能(AI)的使用。它旨在创建更多开放，连接且智能的网站和Web应用程序，这些网站和Web应用程序侧重于使用基于机器的数据理解。

What this means is that everything will be connected and machines will use the internet too. It'll be similar to how web crawlers crawl websites and understand the context of the page.

这意味着一切都将连接，机器也将使用互联网。它将类似于网络爬虫如何爬网网站并了解页面的上下文。

A good, clean, minimal web design with more focus on content will help machines understand things better. The internet is an open place with lots of innovation. We might be heading towards a web controlled by the mind!

一个良好，干净，最小的网页设计，着重于内容，将帮助机器更好地了解事物。互联网是一个开放的地方，有很多创新。我们可能正在走向由思想控制的网络！

结论 (Conclusion)

We started from the beginning of internet and we've seen how once popular technologies became obsolete. We are still in progress toward a better internet.

我们从互联网的开始就开始了，我们已经看到流行的技术一旦过时了。我们仍在朝着更好的互联网发展。

We are no longer in the era where developers don't worry about users. The user experience is a priority nowadays, whether it's performance or design, a user should feel satisfied with any application.

我们不再处在开发人员不用担心用户的时代。如今，无论是性能还是设计，用户体验都是重中之重，用户应该对任何应用程序感到满意。

And unlike the old days, we are not limited to any one tool. We are free to use our own creativity, and it is up to us how we transform our creations into something valuable.

而且与过去不同，我们不仅限于任何一种工具。我们可以自由地运用自己的创造力，这取决于我们如何将自己的创作转变为有价值的东西。

The web is a wonderful place and there are many great websites to get inspired by. Let's keep our fingers crossed and keep moving forward.

网络是一个很棒的地方，有很多很棒的网站可以从中得到启发。让我们保持双手交叉，继续前进。

Hope you liked my first article. I invite you to my internet home theabbie.github.io where I keep everything. Thank you for reading.

希望你喜欢我的第一篇文章。 我邀请您到我的互联网主页theabbie.github.io ，那里存放所有内容。 感谢您的阅读。