响应式网页教程_如何响应式思考：响应式网页设计教程

响应式网页教程

For a long time, responsive web design was a trend. Now it's simply a reality. If we think of a website, we don't really have to say "a responsive website", it's just an expected reality.

长期以来，响应式网页设计是一种趋势。 现在，这只是一个现实。 如果我们想到一个网站，我们实际上不必说“响应式网站”，这只是预期的现实。

This means that when we are putting together a website, it must be built keeping in mind how it will look on different screen sizes. With how things are trending today, there must be a strong emphasis on the mobile experience.

这意味着当我们建立一个网站时，必须牢记在不同屏幕尺寸下的外观。 随着当今形势的发展，必须特别重视移动体验。

Recently, I launched a comprehensive and detailed course on Scrimba called The Responsive Web Design Bootcamp. This course covers all the technical and architectural concepts about responsive web design in great depth. This blog is based on one of the six sections of the course: Starting to think responsively.

最近 ，我在 Scrimba 上 开设 了一个全面而详细的课程， 名为 响应式Web设计训练营 。 本课程深入涵盖了有关响应式Web设计的所有技术和体系结构概念 。 此博客是根据课程的六个部分之一 ： 启动 荷兰国际集团 ，以响应思考 。

进入响应式思维框架 (Getting into the responsive frame of mind)

This module of the course focuses on the importance of thinking about responsiveness before you write a single line of code, as well as some other essentials of building a responsive website:

本课程的这一模块着重于在编写一行代码之前考虑响应性的重要性，以及构建响应式网站的其他一些基本要求：

1. How to approach a layout
   如何处理布局
2. CSS Units
   CSS单位
3. Flexbox basics
   Flexbox基础
4. Media query basics
   媒体查询基础

While we use a few simple exercises to get started, the main focus of this module of the course is to build out a fully responsive 3-page website. We use it both to reinforce what we've already learned, as well as introduce a few new things into the mix.

虽然我们使用一些简单的练习来入门，但是本课程的主要重点是建立一个响应能力强的3页网站。 我们既可以使用它来巩固我们已经学到的知识，又可以将一些新事物引入其中。

In this post, we'll be exploring the concepts that I explore in this module of the course that are listed above, from a dive into em vs rem, a look at the basics of flexbox and media queries, as well as overviews of some of the projects we build out in the course.

在这篇文章中，我们将探索上面列出的本课程模块中探索的概念，包括对em vs rem的深入了解，Flexbox和媒体查询的基础知识以及一些概述。我们在课程中建立的项目中。

CSS单位 (CSS Units)

The first and most fundamental concept in building a responsive web design are the units that we use to set many of our properties with.

构建响应式网页设计的第一个也是最基本的概念是用于设置许多属性的单元。

In lesson 2 we are going to learn what are some of the CSS units available and how they are different from each other. Most importantly, we'll learn which ones to use as per the requirements.

在第2课中，我们将学习可用CSS单元有哪些，以及它们之间的区别。 最重要的是，我们将学习根据要求使用哪些。

There are three major types of CSS units available: Absolute Units, Percentage Units, and Relative Units.

有3种主要CSS单位类型：绝对单位，百分比单位和相对单位。

绝对单位 (Absolute Units)

The absolute units are also called fixed units.

绝对单位也称为固定单位。

The length expressed in any of the absolute units will appear in exact same size (hence why we called them fixed, they are a fixed size).

以任何绝对单位表示的长度将以完全相同的大小出现(因此，为什么我们称它们为固定大小，所以它们是固定大小)。

While px (pixels) are the unit that are most common, in CSS we can also use pt, pc, in, cm, mm, and many more, though I wouldn't really recommend those unless you're styling something for print.

尽管px (像素)是最常见的单位，但在CSS中，我们也可以使用pt ， pc ， in ， cm ， mm等，尽管我不会真正建议您使用这些样式，除非您为打印样式。

px are a little more complicated than you might think. In the old days, a px was related to a pixel on your screen, but now CSS uses something called the reference pixel which makes it a fixed size, independent of device resolution.

px比您想象的要复杂。 过去， px与屏幕上的像素有关，但是现在CSS使用称为参考像素的东西，使它固定大小，与设备分辨率无关。

百分比 (Percentages)

Lessons 3-5 of the course dive into percentage. Percentage, as its name suggests, is often used to define the size as relative to the size of its parent.

该课程的第3-5课将按百分比计算。 百分比，顾名思义，通常用于定义相对于其父项大小的大小。

This is a little different than absolute units, and takes a little getting used to. When we set the width of something using px, we are telling that element how big it should be. For example:

这与绝对单位略有不同，并且需要一些时间来适应。 当我们使用px设置宽度时，我们告诉该元素应该有多大。 例如：

.box {
    width: 500px;
    /* this element will be 500px in width */
}

Whereas, if we use a percentage, it's not as straight forward:

而如果我们使用百分比，那么就不那么简单了：

.box {
    width: 80%;
    /* this element will have a width of 80% */
}

But, what is that 80% of? It's of it's parent. When we use percentage for width, margin, or padding it is always looking at the width of it's parent (yes, even for margin and padding on the top and bottom).

但是，那是80% ？ 是它的父母。 当我们将百分比用于width ， margin或padding它始终会查看其父级的宽度 (是的，即使是顶部和底部的margin和padding也是如此)。

We'll often use percentage to define the width's of elements, as it let's them be more flexible, which is essential when putting together a responsive design.

我们经常使用百分比来定义元素的宽度，因为它使它们更灵活，这在组合响应式设计时必不可少。

During the course, we will learn this with the help of following example:

在课程中，我们将借助以下示例来学习这一点：

If we keep the width of the container for the above layout to any fixed number, lets say 500px, we know that it will look okay unless the size of the screen is less than 500px.

如果我们将上述布局的容器宽度保持为任何固定数字(假设为500px ，我们知道除非屏幕尺寸小于500px ，否则它将看起来还不错。

In this scenario, if we want our layout to adjust as per the size of the viewport, what we can do is set the width in percentage which can be 100% or less.

在这种情况下，如果希望我们的布局根据视口的大小进行调整，我们所能做的就是将宽度设置为100%或更小。

.container { 
    width: 70%; 
    ...
}

As we updated the width to be 70% of the width of the parent container, we can now see it adjusts itself to the size of the screen:

当我们将宽度更新为父容器宽度的70％时，我们现在可以看到它会根据屏幕大小进行调整：

There is a problem though. Right now if we put an image inside our container, it looks like this (if the image has a width that is too big):

不过有一个问题。 现在，如果我们将图像放入容器中，则看起来像这样(如果图像的宽度太大)：

The problem is, unless we specify differently, images will be their actual size. To fixthis, we could apply CSS on image itself so that it starts defaulting to the size of its container.

问题是，除非我们另外指定，否则图像将是其实际大小。 为了解决这个问题，我们可以将CSS应用于图像本身，以便它开始默认使用其容器的大小。

.img { 
    width: 100%;
}

And, as we do this, we can see that the image starts defaulting to the size of its parent container.

并且，当我们这样做时，我们可以看到图像开始默认为其父容器的大小。

最大和最小尺寸 (Maximum and minimum sizes)

While the above solution is great, it can actually cause the image to become bigger than it's actual size. If this happens, it will quickly start to lose quality.

虽然上述解决方案很棒，但实际上可能导致图像变得比实际大小更大。 如果发生这种情况，它将很快开始失去质量。

To help fix that, we can instead use max-width.

为了解决这个问题，我们可以改用max-width 。

.img { 
    max-width: 100%;
}

This means that the images maximum width is 100% of it's parent, but that it is allowed to be smaller.

这意味着图像的最大宽度是其父图像的100％，但允许较小。

In the course, I also explore other similar properties, such as min-width, and min-height and max-height, which all set upper and lower limits on the size of an element.

在课程中，我还将探索其他类似的属性，例如min-width ， min-height和max-height ，它们均设置元素大小的上限和下限。

These all take precedent over the width of an element as well, which is always important to remember!

所有这些都优先于元素的width ，记住这一点总是很重要的！

CSS单位-相对单位 (CSS Units - Relative Units)

Relative units in CSS are always relative on the size of something else. Some units will look at the font-size of another element (or that element), while others will look at the size of the view port.

CSS中的相对单位总是相对于其他内容的大小。 有些单位将查看另一个元素(或那个元素)的font-size ，而另一些单位将查看视口的大小。

In the course, I start by introducting the two which are relative to font-size, the em and rem.

在课程中，我首先介绍与font-size有关的两个em和rem 。

em单元 (The em unit)

When you declare the font-size of an element, if you use ems, it will be relative to the parent's font-size.

声明元素的font-size时，如果使用em ，则它将相对于父级的font-size 。

For example, we have the following HTML code where we have some li elements which have few parent elements.

例如，我们有以下HTML代码，其中有一些li元素，而父元素很少。

<body> 
    <section class='class-one'>
        <div class="container">
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </div>
    </section>
</body>

And, we have the following CSS with the above HTML:

并且，我们具有以下带有上述HTMLCSS：

body { 
    font-size: 25px; ...
}

ul { 
    /* 1.5em = 25 * 1.5 = 37.5  */ 
    font-size: 1.5em;
}

In the above case, the ul will take its font-size from its parent and apply on its li elements using the relative 1.5em.

在上述情况下， ul将从其父级获取其font-size ，并使用相对的1.5em将其应用于li元素。

In case of em unit, we have to remember that it will default to the font-size of its immediate parent, which means that if in our above example, we change the font-size of class container to be 15px, then the ul will start to size relative 15px.

对于em单位，我们必须记住它将默认为其直接父级的font-size ，这意味着，如果在上述示例中，我们将class container的font-size更改为15px ，则ul开始将大小调整为相对15px 。

em的级联效应 (Cascading effect of ems)

One of the reasons I don't like to set font-size in em is because of the risk of it being hit by a cascading effect. For example, if we use the above example, but add in a font-size to the li elements, we start to run into problems!

我不喜欢在em设置font-size原因之一是因为它会受到级联效果的影响。 例如，如果我们使用上面的示例，但是在li元素中添加了font-size ，我们就会遇到问题！

body { 
    font-size: 25px; ...
}

ul { 
    font-size: 1.5em;
}

li {
 	font-size: 1.5em;   
}

In this case, the li looks at it's parent, which then looks at the body, so we get a total font-size of 56.25px (1.5 x 1.5 x 25px). Things can quickly get out of control!

在这种情况下， li查看其父项，然后再查看其主体，因此我们得到的总字体大小为56.25px(1.5 x 1.5 x 25px)。 事情很快就会失控！

雷姆单位 (The rem unit)

As we can see, using em can be confusing at times since it takes it's size from its parent which may have its font-size defined also in em and that would create a cascading effect.

如我们所见，使用em有时会造成混乱，因为它占用了其父对象的大小，而父对象font-size也可能在em定义，这会产生级联效果。

The rem unit is short for Root Em, meaning that it only looks at the font-size of the root element. In the case of websites, the root element is always the html element.

rem单位是Root Em的缩写，意味着它仅查看根元素的font-size 。 对于网站，根元素始终是html元素。

So if you set the font-size of something in rem it is always relative to the font-size of the html element and nothing else, making it much easier to use.

因此，如果您在rem设置某些内容的字体大小，则它总是与html元素的font-size有关，而与其他元素无关，这使它的使用更加容易。

使用em是一个好主意吗？ (Is it ever a good idea to use ems?)

While em might seem like something you might want to avoid, they can be really useful!

尽管em似乎是您可能要避免的东西，但它们可能确实有用！

When setting font-size with em, it looks to the parent element, but when we set any other property using em, it is relative to that element's font-size! That's super useful for setting things like margin and padding.

当使用em设置font-size时，它将查找父元素，但是当使用em设置任何其他属性时，它将相对于该元素的font-size！ 这对于设置margin和padding类的超级有用。

If we increase the font-size of our selector, it will increase the margin or padding with it, and vice versa! It's super useful.

如果我们增加选择器的font-size ，它将增加页margin或padding ，反之亦然！ 超级有用。

Here is a slide from the course which sums up how I like to use the two:

这是该课程的一张幻灯片，总结了我喜欢如何使用两者：

弹性盒 (Flexbox)

Once we nail down the units and what they are best suited to, I turn the course toward a look at the basics of flexbox, which allows us to create responsive layouts super easily without having to rely on floats or positioning.

一旦确定了单元及其最适合的单元，我便转向了解flexbox的基础知识，这使我们可以非常轻松地创建响应式布局，而不必依赖浮动或定位。

All elements, by default, have the display property of either block or inline.

默认情况下，所有元素的display属性均为block或inline 。

Block elements (div , header, footer, h1 -> h6, p, etc.) stack on top of each other.

块元素 ( div ， header ， footer ， h1 > h6 ， p等)彼此堆叠。

Inline elements (a, strong, em, span, etc.) stay within the flow of what is around them.

内联元素 ( a ， strong ， em ， span等)保留在它们周围的内容之内。

When we change their display to flex, they start aligning side by side.

当我们将其显示更改为可弯曲时，它们开始并排对齐。

Let's see how to design a simple architecture of a typical responsive website with some columns using flexbox. The result would be the following layout:

让我们看看如何使用flexbox设计具有某些专栏的典型响应式网站的简单架构。 结果将是以下布局：

We will will start off with the following HTML:

我们将从以下HTML开始：

<body>
  <div class="container">
    <h1>This is the header</h1>
    <div class="columns">
      <div class="col">
        <h2>Section 1 - Col 1</h2>
        <p>This is column 1</p>
      </div>
      <div class="col">
        <h2>Section 1 - Col 2</h2>
        <p>This is column 2</p>
      </div>
      <div class="col">
        <h2>Section 1 - Col 3</h2>
        <p>This is column 3</p>
      </div>
    </div>
    <div class="columns">
      <div class="col">
        <h2>Section 2 - Col 1</h2>
        <p>This is column 1</p>
      </div>
      <div class="col">
        <h2>Section 2 - Col 2</h2>
        <p>This is column 2</p>
      </div>
    </div>
  </div>
</body>

And, we can have the following CSS:

而且，我们可以使用以下CSS：

.container {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}

.columns {
  display: flex;
  margin: 1em 0;
}

To add background background colors to the columns, we will add couple of modifier classes and assign them to the columns:

要将背景色添加到列中，我们将添加几个修饰符类并将它们分配给列：

.col-bg-beige {
  background-color: beige;
  padding: 1em;
}

.col-bg-aqua {
  background-color: aqua;
  padding: 1em;
}

So far the page looks like this:

到目前为止，页面如下所示：

In the next step, we want to set the width of columns, we will define the modifier classes and assign the fixed widths inside them.

在下一步中，我们要设置列的宽度，我们将定义修饰符类并在其中分配固定的宽度。

.col-1 {
  width: 25%;
}
.col-2 {
  width: 50%;
}
.col-3 {
  width: 75%;
}
.col-4 {
  width: 100%;
}

We will assign these classes to our columns as per the layout needs such as:

我们将根据布局需求将这些类分配给我们的列，例如：

If we want our flex columns to align with each other, we can use the following property:

如果我们希望flex列彼此对齐，则可以使用以下属性：

.columns {
  display: flex;
  justify-content: center;
}

There is a lot more detail about Flexbox basics with code samples and online code editing capability in the Scrimba course The Responsive Web Design Bootcamp.

Scrimba课程 The Responsive Web Design Bootcamp 中提供了有关Flexbox基础的更多详细信息，包括代码示例和在线代码编辑功能 。

媒体查询 (Media Queries)

Media queries allow us to declare new CSS rules that only apply in specific situations, such as different types of media (screen, print, speech), and with different media features, such as screen width, orientation, aspect ratio and much more.

媒体查询使我们能够声明仅适用于特定情况的新CSS规则，例如不同类型的媒体(屏幕，打印，语音)以及具有不同的媒体功能(例如屏幕宽度，方向，长宽比等)CSS规则。

The basic syntax for a media query looks like this:

媒体查询的基本语法如下：

@media media-type and (media-features) {...}

@media media-type and ( media-features ) {...}

For example the piece of code below will set background-color to the body if it is a screen and has min-width of 480px.

例如，下面的代码如果是屏幕并且min-width为480px，则将background-color设置为正文。

@media screen and (min-width: 480px) {  
    body {    
        background-color: aqua;  
    }
}

Going back to our example from above, if we reduce the screen size, we see that some of the columns become way more narrow and we want to fix them by making it fully responsive.

回到上面的示例中 ，如果我们减小屏幕尺寸，我们会看到某些列变得更加狭窄，我们希望通过使其完全响应来修复它们。

Since we are already using flexbox, we can change the flex-direction property to switch the main axis, so instead of creating columns, it will create rows of content.

由于我们已经在使用flexbox，因此我们可以更改flex-direction属性来切换主轴，因此，与其创建列，不如创建列。

@media screen and (max-width: 600px) {
  .columns {
    flex-direction: column;
  }
}

设计响应式导航 (Designing a responsive navigation)

One of my favorite places to take a look at how to apply all of the above into a realistic example is by taking a look at setting up a responsive navigation.

我最喜欢的地方之一是看如何设置响应式导航，以了解如何将以上所有内容应用到实际示例中。

We will start off with writing the HTML for the navigation bar.

我们将从编写导航栏HTML开始。

<header>
  <div class="container container-nav">
    <div class="site-title">
      <h1>Living the social life</h1>
      <p class="subtitle">A blog exploring minimalism in life</p>
    </div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About me</a></li>
        <li><a href="#">Recent posts</a></li>
      </ul>
    </nav>
  </div>
</header>

And then we can use flexbox, media queries, a few other little things here and there to start styling it up in our CSS.

然后，我们可以在这里和那里使用flexbox，媒体查询以及其他一些小东西，开始在CSS中对其进行样式设置。

Here is the glimpse of some of the CSS (detailed code is available in the course lessons):

这是一些CSS的一瞥(课程中提供了详细的代码)：

body {
  margin: 0;
}

.container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.container-nav {
  display: flex;
  justify-content: space-between;
}

nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 675px) {
  .container-nav {
    flex-direction: column;
  }
    
  header {
    text-align: center;
  }
}

And at the end of the lessons in this section of the module, we will have a nice, simply, fully responsive navigation:

在本部分的课程结束时，我们将提供一个很好的，简单的，完全响应的导航：

建立一个三页的网站 (Building out a 3-page site)

检查结构 (Examining the structure)

With the navigation wrapped up, I jump into the full-fledge project. This is going to be a 3-page mobile responsive website.

完成导航后，我跳入了完整项目。 这将是一个3页的移动响应式网站。

Below you can see the pages we're buildingout, as well as a link to Adobe XD where you can check out the artboards in more detail. In the lessons, I take a look at the similarities across the different pages, and how I start planning for something like this before starting to write any code.

在下面，您可以看到我们正在构建的页面，以及指向Adobe XD的链接，您可以在其中更详细地查看画板。 在本课程中，我将研究不同页面之间的相似之处，以及在开始编写任何代码之前如何开始规划此类内容。

主页 (The Home page)

As we can see from the image below that there are two main sections of the home page. The left side list of articles with a featured article on top, and the right hand panel with author’s info and the recent posts.

从下图可以看出，主页有两个主要部分。 左侧是文章列表，顶部是特色文章，右侧是作者信息和最新帖子。

We will wrap the whole content in container div and first of all create the left hand section which is a list of articles. This is going to be created with the help of article tags of the HTML and then we will put content inside them

我们将全部内容包装在div container ，首先创建左侧的文章列表。 这将的帮助下创建articleHTML标签，然后我们就会把里面的内容他们

<div class="container">
  <main role="main">
    <article class="article-featured">
      <h2 class="article-title"></h2> <img src="" alt="" class="article-image">
      <p class="article-info"></p>
      <p class="article-body"></p>
      <a href="#" class="article-read-more"></a>
    </article>
    ...
  </main>
</div>

Next up we will create the right hand panel with the help of aside tag of the HTML.

接下来，我们将在HTML的aside标签的帮助下创建右侧面板。

<aside class="sidebar">
  <div class="sidebar-widget">
    <h2 class="widget-title"></h2> 
    <img src="#" alt="" class="widget-image">
    <p class="widget-body"></p>
  </div>
    
    ...
</aside>

Before jumping into the layout itself, I like to always start with the typography. It might not be the most exciting part of writing CSS, but when the fonts and font-sizes start to change, it can have a huge impact on the layout. Starting there, then worrying about the layout makes our lives so much easier.

在进入版式之前，我总是喜欢从排版开始。 它可能不是编写CSS时最令人兴奋的部分，但是当字体和字体大小开始改变时，它可能会对版面产生巨大影响。 从这里开始，然后再担心布局问题，使我们的生活变得更加轻松。

With the typography in place, it's time to start working on the layout itself. While we can start with large screens and then use a media query to redesign things at smaller sizes (like we did with the navigation above), I find it much less work to work the other way around.

设置好版式后，就该开始着手布局了。 虽然我们可以从大屏幕开始，然后使用媒体查询来重新设计较小尺寸的东西(就像我们在上面的导航中所做的那样)，但我发现反之亦然。

Mobile layouts tend to be much simpler, so by starting mobile first, we can create our layouts without too much work.

移动版式往往要简单得多，因此，通过首先启动移动版，我们无需太多工作即可创建布局。

One the mobile layout is done, then it's time to add in our media query (or queries) and start working on modifying the layout for larger screens.

一种是移动布局，然后是时候添加媒体查询(或多个查询)并开始着手修改大屏幕的布局了。

One thing that's really important is not not force yourself to have breakpoints for specific devices. It's all too common to see the same breakpoints used all the time, but really, you should be making layout changes when your layout dictates that it's needed.

真正重要的一件事不是不要强迫自己为特定设备设置断点。 经常看到相同的断点是很常见的，但是实际上，当布局指示需要断点时，应该进行布局更改。

I really don't care what device someone is on, or what the size of that device is. What's important is it looks good on all devices. With the amount of different devices and screen sizes today, focus on the layout itself.

我真的不在乎某人正在使用什么设备，或该设备的大小。 重要的是在所有设备上看起来都不错。 如今，随着各种设备和屏幕尺寸的增加，请专注于布局本身。

In the course itself, I dive into looking at how we can figure out when a layout needs a breakpoint (often because the lines of text are getting too long!), and then we dive into a few fun extras, looking at properties such as order, object-fit to help our images adjust much easier, and fine tuning the layout.

在课程本身中，我将深入研究如何确定布局何时需要断点(通常是因为文本行变得太长！)，然后我们深入研究一些有趣的功能，例如order ， object-fit以帮助我们轻松调整图像并微调布局。

The second and third pages are quite easy to create once the first one is done. By having looked at all the pages before starting, and naming things with classes that can be reused across each page, there are small tweaks to do here and there, but overall things move very fast.

一旦完成第一和第二页，第二和第三页就很容易创建。 通过在开始之前查看所有页面，并使用可在每个页面上重用的类来命名事物，可以在此处和此处进行一些细微的调整，但是总体上进展很快。

结论 (Conclusion)

In this article, we examined some core CSS principles to designing responsive websites, from their units to media queries and flexbox. We looked at how we can set it all up for a navgation, and how to break down and analyze a bigger design.

在本文中，我们研究了设计响应式网站的一些核心CSS原则，从其单元到媒体查询和Flexbox。 我们研究了如何将其设置为导航，以及如何分解和分析更大的设计。

As I mentioned off the top, all of this content is from the Starting to think responsively module of the course The Responsive Web Design Bootcamp.

正如我在顶部提到的，所有这些内容均来自“ 开始思考”模块 响应Web设计训练营课程。

The course itself dives much deeper into these topics and many others, from an exploration of the fundamentals of CSS, as well as deep dives into both flexbox and grid, including building out several other projects.

通过对CSS基础的探索，课程本身深入探讨了这些主题以及许多其他主题，并且深入探讨了flexbox和grid，包括建立了其他几个项目。

It is the era of mobile-first websites. Good news is that we can achieve everything we need using CSS. There are lots of cool resources and tools available now using which we can create beautiful mobile friendly websites without the need for frameworks or libraries. CSS has reached a really fun place. I really love CSS, and I hope you join me in the course where hopefully I can help you fall in love with it too!

这是移动优先网站的时代。 好消息是，我们可以使用CSS实现所需的一切。 现在有许多很酷的资源和工具可供使用，我们可以使用它们创建美观的移动友好型网站，而无需框架或库。 CSS已经达到了一个非常有趣的地方。 我真的很喜欢CSS，希望您能加入我的课程，希望我也能帮助您爱上它！

翻译自: https://www.freecodecamp.org/news/how-to-start-thinking-responsively/

响应式网页教程