如何使网站具有响应能力？

自适应布局（响应式布局）由以下三个因素组成：

1.灵活的布局：

用于创建网页布局的div需要由相对长度单位组成。这意味着您不应在CSS中使用固定宽度，而应使用百分比。

将尺寸从设计转换为百分比的公式是（目标/上下文）x100 =结果

让我们以上面的图片作为设计示例。要计算左侧div的大小，将像这样计算：（300px / 960px）x100 = 30.25％

CSS看起来像这样：

.leftDiv
{
    width: 30.25%;
    float: left;
}

.rightDiv
{
    width: 65%;
    float: left;
}

为了使文本自动调整大小，可以使用称为VW（ViewWidth）的单位

.myText
{
    font-size: 1vw;
}

这样可以确保文本相对于视图宽度自动调整大小。

2，柔性媒体

灵活的媒体适用于图像，视频和画布，这些图像，视频和画布会相对于其父对象自动调整大小。

例子：

img, video, canvass
{
    max-width: 100%;
}

这样可以确保这些元素在其父级内部自动调整大小。

3.媒体查询：

下一步是使用媒体查询，就像您在问题中所做的一样，这些媒体查询为某些屏幕尺寸定义了某些CSS语句。我通常只对计算机屏幕，平板电脑和电话屏幕使用三个媒体查询。不需要超过此数目，因为如果正确完成，“灵活版式”和“灵活媒体”将确保相对调整大小。

您可能会发现这有帮助：https : //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries