关于响应式网站需要了解什么？

可以根据设备或查看它的屏幕动态改变其外观的网站称为响应式网站。它使用断点的概念来确定网站在不同屏幕上的外观。断点是根据设备浏览器的宽度指定的，这意味着所有屏幕上的体验根据它们的宽度而有所不同，使其在所有设备上看起来都很好，使用相同的 HTML。

不同设备常见的浏览器尺寸如下：

• 手机： 360 x 640
• iPhone X： 375 x 812
• 像素 2： 411 x 731
• 平板电脑： 768 x 1024
• 笔记本电脑： 1366 x 768
• 高清桌面： 1920 x 1080

与普通网站不同，响应式网站还解决了为不同设备设计不同网站的问题，因为可以相应地调整内容。

响应式网站的一个很好的例子是 GeeksforGeeks 网站：

• 电话查看

电话查看网站

• 平板电脑视图

网站的平板电脑视图

从两张图中都可以看到，所有的内容都是根据设备宽度和文字进行调整的，图片大小随着宽度的增加而增大，随着宽度的减小而减小。

如何让网站响应式？

以下是创建响应式网站的方法：

1. 第一步是将以下元标记包含到代码的头部标记中。

这将设置视口，根据设备的屏幕宽度调整内容，并将在浏览器中以其初始缩放级别加载页面。

示例：带有和不带有元标记的视图。

没有元标记

带有元标记

2. 使文本大小响应：响应式文本大小是一种，它根据浏览器大小而变化，即宽度增加时放大，宽度减小时缩小。可以使用视口宽度属性（即vw单位）使文本具有响应性。

    GeeksforGeeks




    The content on GeeksforGeeks has been 
    divided into various to make it easily 
    accessible for the users.

示例：响应式和非响应式文本大小：

无响应的文本大小

响应式文本大小

响应式文本大小随着浏览器宽度的增加而增加，如第二张图片所示。

3. 使图像响应式：可以根据浏览器宽度改变尺寸的图像是响应式图像。可以通过将宽度的 CSS 属性应用于图像并将其设置为 100% 来使图像具有响应性，因此它可以相应地放大或缩小。

示例：响应式和非响应式图像：

无响应的图像

响应式图像

与第二张图片一样，响应式图片会根据设备宽度改变其比例。

4. 媒体查询可用于使网站具有响应性：媒体查询是 CSS3 的一部分，除了使文本大小和图像具有响应性外，它还提供了广泛的属性，使用该属性可以使网站更具吸引力。

我们可以为不同的屏幕尺寸设置不同的属性。例如，在手机上查看网站时，会显示一朵玫瑰，而在平板电脑上查看时，会显示百合花的图像。或者根据浏览器宽度改变背景颜色。

@media(max-width: 500px) {
    body {
        background-color:pink;
    }
}
@media(min-width: 501px) {
    body {
        background-color:black;
   }
}

例子：

宽度小于等于500px的设备

宽度大于 500px 的设备

宽度小于或等于 500px 的设备浏览器具有粉红色背景，宽度大于 500px 的设备具有黑色背景。这一切都是通过简单的媒体查询完成的，我们可以在网站上添加更多这样的断点。

5. 用于响应式网站的 Flexbox： Flexbox 也是一个非常强大的 CSS 模块，有助于使网站具有响应性。它具有非常独特和有效的特性，可以非常轻松地执行复杂的任务。即使元素的大小未知，它也可用于缩小或扩展容器中的元素。

句法：

.flex {
    justify-content: space-between;
}

示例：下图描绘了网站上不同属性的各种效果。还有更多这样的属性可以使网站看起来不错，并使访问者的体验愉快。