响应式网页设计_响应式设计教程-在5分钟内学习响应式网页设计-CSDN博客

响应式网页设计

In this article, I'll teach you as many responsive design techniques as I possibly can in five minutes. This obviously isn't enough to learn it properly, but it will give you an overview of the most important concepts, which I personally define as these:

在本文中，我将在五分钟内尽可能地教您尽可能多的响应式设计技术。显然这不足以适当地学习它，但是它将为您提供最重要的概念的概述，我个人将其定义为：

Relative CSS units
相对CSS单位
Media queries
媒体查询
Flexbox
弹性盒
Responsive typography
响应式排版

If you want to dive deeper into the subject afterward, you can check out our responsive web developer bootcamp on Scrimba, which will enable you to build responsive websites on a professional level.

如果您想在以后深入研究该主题，可以在Scrimba上查看我们的响应式Web开发人员训练营，这将使您能够建立专业水平的响应式网站。

But for now, let's start with the basics!

但是现在，让我们从基础开始吧！

相对CSS单位 (Relative CSS units)

At the core of responsive web design are relative CSS units. These are units that get their value from some other external value. This is handy because it allows, for example, the width of an image to be based on the width of the browser.

响应式网页设计的核心是相对CSS单元。这些是从其他外部价值中获取价值的单位。这很方便，因为它允许例如图像的宽度基于浏览器的宽度。

The most common ones are:

最常见的是：

%
％
em
EM
rem
雷姆
vw
大众
vh
h

In this article, we'll start with the percentage unit %, and then we'll look at the rem unit in the final section.

在本文中，我们将从百分比单位% ，然后在最后一节中查看rem单位。

Let's say you have a very simple website, like this:

假设您有一个非常简单的网站，例如：

Its HTML is just the following:

它HTML如下：

<body>
    <h1>Welcome to my website</h1>
    <image src="path/to/img.png" class="myImg">
</body>

As you can see from the GIF below, our image will by default have a fixed width:

从下面的GIF中可以看到，默认情况下，我们的图片具有固定的宽度：

That's not particularly responsive, so let's change that to 70 percent instead. We'll simply do the following:

响应速度不是特别快，因此我们将其更改为70％。我们将简单地执行以下操作：

.myImg {
    width: 70%;
}

This sets the width of the image to 70 percent of the width of its parent, which is the <body> tag. As the <body> tag spans the entire width of the screen, the image will always be 70 percent of the screen itself.

这会将图像的宽度设置为其父图像(即<body>标记)宽度的70％。由于<body>标签跨越屏幕的整个宽度，因此图像将始终是屏幕本身的70％。

Here's the result:

结果如下：

And that's how easy it is to create a responsive image!

这就是创建响应图像的容易程度！

使用媒体查询来改善移动体验 (Using media queries to improve the mobile experience)

We have one problem with our responsive layout, though, which is that it looks weird on very small screens. The 70% width is to narrow when viewed on mobile. Just have a look for yourself:

但是，我们的响应式布局存在一个问题，那就是在非常小的屏幕上看起来很奇怪。在移动设备上观看时，70％的宽度会变窄。看看自己：

Making it look better in this situation is a perfect task for media queries. They allow you to apply different styling based upon, for example, the width the screen. We can basically say if the screen is less than 768px wide, use a different styling.

在这种情况下使其看起来更好是媒体查询的完美任务。它们使您可以根据屏幕宽度来应用不同的样式。基本上可以说， 如果屏幕的宽度小于768像素，请使用其他样式。

Here's how we create a media query in CSS:

这是我们在CSS中创建媒体查询的方式：

@media (max-width: 768px) {
    .myImage {
        width: 100%
    }
}

This CSS block will only be applied if the width of the screen is less than 768 pixels.

仅当屏幕宽度小于768像素时，才应用此CSS块。

Here's the result:

结果如下：

As you can see, the page has a breakpoint where the image suddenly becomes wider. That's when the browser is 768 pixels wide, and the image swaps between 70% and 100%.

如您所见，页面上有一个断点，图像突然变宽。那是当浏览器为768像素宽，并且图像在70%和100%之间交换时。

Next up is Flexbox. You simply can't learn about responsiveness without learning about Flexbox. It changed the responsive design game when it was introduced a few years ago, as it makes a lot easier to position elements responsively along an axis.

接下来是Flexbox。如果您不了解Flexbox，就无法了解响应能力。几年前推出时，它改变了响应式设计游戏，因为它使沿轴响应式放置元素变得更加容易。

To utilize Flexbox we'll make our site a bit more complex by adding a navbar above the title. Here's the HTML for that:

为了利用Flexbox，我们将在标题上方添加一个导航栏，使我们的网站更加复杂。这是用于此HTML：

<nav>
    <a href="#">Home</a>
    <a href="#">About me</a>
    <a href="#">Contact</a>
</nav>

By default, it'll simply look like this.

默认情况下，它看起来像这样。

Our navigation items are all squeezed into the left side, which isn't what we want. We want them to be spaced evenly throughout the page.

``我们的导航项全部被压缩到左侧，这不是我们想要的。我们希望它们在整个页面中均匀分布。

To achieve that, we'll simply turn the nav container into a flexbox, and then use the magical justify-content property.

为此，我们只需将nav容器转换为flexbox，然后使用神奇的justify-content属性。

nav {
    display: flex;
    justify-content: space-around;
}

The display: flex turns the <nav> into a flexible box, and the justify-content: space-around tells the browser that the items inside the flexible box should have space around them. So the browser distributes all leftover space equally around the three items.

display: flex将<nav>变成一个柔性框， justify-content: space-around告诉浏览器该柔性框内的项目周围应该有空格。因此，浏览器将所有剩余空间均等地分布在三个项目周围。

Here's how it looks. And as you'll notice, it scales nicely:

这是它的外观。您会注意到，它可以很好地扩展：

响应式排版：rem (Responsive typography: rem)

The final step is to make our typography responsive as well. You see, I want the navbar and the title to shrink a bit when the screen is less than 768 pixels wide (our media query breakpoint, remember?).

最后一步是使我们的排版也响应。您会看到，我希望导航栏和标题在屏幕小于768像素宽时缩小一些(我们的媒体查询断点，还记得吗？)。

One way to do this would be to decrease all the font sizes in the media query, like this:

一种方法是减少媒体查询中的所有字体大小，如下所示：

@media (max-width: 768px) {
    nav {
        font-size: 14px;
    }
    h1 {
        font-size: 28px;
    }
}

This isn't ideal though. We might end up with several breakpoints in the app, and have multiple elements as well (h2, h3, paragraphs, etc). As a result, we'll have to keep track of all the elements in all the different breakpoints. It'll be a mess!

不过，这并不理想。我们可能会在应用程序中遇到几个断点，并且还有多个元素(h2，h3，段落等)。结果，我们必须跟踪所有不同断点中的所有元素。一团糟！

However, most likely, they're going to relate to each other in more or less the same way throughout the various breakpoints. For example, the h1 will always be larger than the paragraph.

但是，很可能，它们将在各个断点之间以几乎相同的方式相互关联。例如， h1将始终大于paragraph 。

So what if there was a way I could adjust one factor, and then make rest of the font sizes would scale relative to that factor?

那么，如果有一种方法可以调整一个因素，然后使其余字体大小相对于该因素缩放，该怎么办？

Enter rems!

输入rems！

A rem is basically this: the font-size value you've set to your <html> element. Liks this:

rem基本上是这样：您已为<html>元素设置的font-size值。喜欢这个：

html {
    font-size: 14px;
}

So in this document, one rem equals 14px.

因此，在此文档中，一rem等于14像素。

That means that we can set all our font sizes on our website in rem units, like this:

这意味着我们可以在我们的网站上以rem单位设置所有字体大小，如下所示：

h1 {
    font-size: 2rem;
}

nav {
    font-size: 1rem;
}

And then we'll simply change the font-size value for the <html> tag inside our media query. This will ensure that the font size for our h1 and nav elements will change as well.

然后，我们只需在媒体查询中更改<html>标记的字体大小值即可。这将确保h1和nav元素的字体大小也将更改。

Here's how we change our rem value in a media query:

这是我们如何在媒体查询中更改rem值的方法：

@media (max-width: 768px) {
    html {
        font-size: 14px
    }
}

And just like that, we have a breakpoint for all of our font-sizes as well. Notice how the font-size changes as the page crosses the 768-pixel mark:

就像那样，我们对于所有字体大小都有一个断点。注意页面越过768像素标记时字体大小如何变化：

It's only been five minutes, but now you've actually learned to make font-sizes, images, and navbar items to respond to the width of the page. That's pretty good, and you've taken your first steps towards learning the highly valuable skills of building responsive websites.

只有五分钟，但是现在您实际上已经学会了制作字体大小，图像和导航栏项目以响应页面的宽度。很好，您已经迈出了第一步，学习构建响应式网站的宝贵技能。

If you're interested in continuing this learning journey, I'd recommend you to take a look at our massive Scrimba course on the subject! It's taught by one of YouTube's most popular teachers on the subject, and it'll take you to a professional level in responsive web design.

如果您有兴趣继续学习，我建议您看看我们有关该主题的大量Scrimba课程！该课程由YouTube上最受欢迎的一位老师讲授，它将带您进入自适应网页设计的专业水平。

Happy coding :)

快乐的编码:)

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if you want to learn to build modern website on a professional level.

谢谢阅读！我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。如果您想学习以专业水平构建现代网站，则应查看我们的自适应Web设计新手训练营。