什么是响应式网页设计？

CSS媒体查询
如果您不熟悉响应式Web设计，则媒体查询是第一个要学习的最重要的CSS功能。媒体查询使您可以根据当前设备尺寸来设置元素的样式。现在流行的CSS策略是首先编写移动样式，然后在其上构建更复杂的桌面版网页样式。

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

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

1
2
3
4
5
6
7
8
9
.column {
width: 100%;
}

@media (min-width: 600px) {
.column {
width: 50%;
}
}
在考虑移动优先时，将“column”元素的宽度设置为100%；
通过使用min-width媒体查询，我们专门为最小宽度为600px（暨宽度大于600px）的viewport定义了规则。因此，对于大于600px的界面，我们的column元素的宽度相对其父元素的50％。
虽然媒体查询对于响应式网页设计是必不可少的，但许多其他新的CSS功能也在浏览器中得到广泛采用和支持。在响应性网页设计方面，Flexbox是这些新的重要CSS功能之一。

什么是Flexbox？
首先，让我先告诉你“ Flexbox能做什么”。

使用CSS垂直居中的最简单方法是什么？Flexbox。
如何创建自适应网格布局？Flexbox。
我们如何实现全球和平？Flexbox。
Flexbox布局（Flexible Box）模块提供了另一种更棒的方式来应对页面种类似布局、对齐和分配容器等需求，即使它们的大小是动态的。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

我们使用上面的代码完成了以下工作：

display: flex在我们的main容器元素中建立一个Flexbox布局。
移动优先的样式。我们设置main标签设置为flex-wrap: wrap，这个设置为允许其内部子节点在父节点中换行， flex-basis: 100% 是指我们的div节点的宽度是相对于父节点宽度的100％（图1）。
适用于桌面设备的样式，我们利用与上一节中的示例类似的媒体查询将容器main元素设置为flex-wrap: nowrap，这样可以确保子元素不会换行，通过在媒体查询中设置div为flex-basis: 33%，我们设置其宽度为父级宽度的33％（图2）。

（ 图1）

（ 图2）

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

使用内容溢出滚动条进行水平滚动
可能会有这样一种情况：您的内容会溢出界面，而没有一种优雅的处理方式去解决。没关系，内容溢出滚动条可以为你解决这个问题。

此技术的常见用途包括可滚动菜单和表格。下面是一个可滚动菜单的示例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Responsive Web Design RWD Responsive menu Overflow scroll example This is a lot of content! Yes we have another item overflow-y: scroll 这个CSS是关键，通过设置overflow，子元素将通过水平轴溢出并出现横向滚动条。 仅使用overflow-y还是不够的，还得为节点设置 white-space: nowrap

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

1
2
3
4
5
6
7
8
9
10
11

通过设置max-width: 100% ，图像将根据其容器宽度自动放大或缩小。 通过picture标签，我们实际上仅渲染一个图像，并且仅基于用户的设备加载最合适的图像。 WebP是一种现代图像格式，可为Web页面上的图像提供出色的压缩方式。 srcset 用于根据设备的分辨率告知浏览器要使用哪个图像。 我们利用属性/值对建立本地延迟加载loading="lazy"。

自适应视频
让我们来直接看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

position: relative 容器元素上的子元素允许子元素利用相对于其的绝对位置。
height: 0结合padding-bottom: 56.25%是在此处建立动态行为，增强16:9纵横比的关键要素。
position: absolute，top: 0并left: 0在iframe上进行设置，从而创建一种行为，其中元素相对于其父元素绝对定位自己……将其粘贴到左上方。
最后，宽度和高度为100％会使子级iframe元素成为其父级的100％。父级.videoWrapper完全控制建立此宽高比布局。
好的，了解了上面的一些内容后，想必我们已经对响应式Web设计有了一些了解了，那么我们如何测试已经完成的工作呢？
深圳网站建设www.sz886.com