八维教育计算机培训使用 CSS 的响应式网页设计

时间：2023-10-07 08:24:01 | 来源：网站运营

时间：2023-10-07 08:24:01 来源：网站运营

八维教育计算机培训使用 CSS 的响应式网页设计：

八维教育计算机培训使用 CSS 的响应式网页设计

今天我们来聊聊响应式网页设计的一些常见问题。虽然不会教你响应式网页设计的完整概念，但会回顾一些相关主题，例如导航栏、字体、图片、弹性和网格、媒体查询等。你将对如何制作响应式网页有一些了解从中为手机和平板设备设计。

字体大小 -

当更改字体大小以适应视口时，尤其是对于在桌面模式下显示良好但在移动视图中显示不佳的大标题。

对于第一种方式，您可以使用 vw 的 calc 方法根据视口调整字体大小，但有时它可能会变得很大或很小。

当您希望为特定断点范围设置字体大小时，可以使用另一种方法。

图片 -

当您希望根据视口放大或缩小图像时

我将图像的最大宽度设置为 100%，因此它不会超出该限制。通过选择最小宽度，您可以决定图像应该缩小多少；在这种情况下，200px 表示图像在停止前最多只能缩小 200px。图像的高度将适当调整。

此外，您可以将最大宽度减小到例如 60%，这样它就不会变得太宽以供桌面查看。

例子 -

Flex box -

当你想要完全控制子元素时使用 flexbox。

我通常使用 flexbox 来创建水平列表、导航栏、居中元素等。

这是一个 flexbox 容器，它将项目放在水平线上，在 1 行中

Gap 用于提供子元素之间相等的间距，即 1rem(16px)。

Flex-wrap 在这种情况下至关重要，因为如果容器大小不足以容纳一行中的所有项目，它会创建一个新行。容器大小缩小，将创建更多行。

这只是一个展示 flexbox 如何帮助响应式网页设计的演示。你可以从这里学习 flexbox - A Complete Guide to Flexbox | CSS-Tricks

网格 -

网格是 CSS 中非常有用和强大的东西

我们可以创建具有响应能力的二维网格

大多数时候，它用于在 nxn 网格元素中显示列表，如产品页面、图片库、卡片等。

它将生成一个 2x5 的网格，有 2 行和 5 列；它不是响应式的，但我们可以使用媒体查询使其响应式。

另一个称为 auto-fit 或 auto-fill 的值可用于在不使用媒体查询的情况下创建响应式网格。

当容器大小不足以容纳一行中的所有元素时，自动填充将创建一个新行并继续为较小的视口创建新行，直到它达到 1 列布局，每行中有一个元素。每个网格单元格将为 100px 或 1fr，以 minmax 函数中指定的较大者为准。

媒体查询 -

它是响应式网页设计的核心；它用于定义视口断点，我们可以在其中对元素应用不同的样式，如上面的字体部分示例所示。

您可以指定一个最小范围，当元素的样式到达由 min-width 指定的最小断点时，该范围内的元素样式将发生变化。

类似地，您可以指定一个最大范围，当元素的样式达到由 max-width 指定的最大断点时，该范围内的元素样式将发生变化。*有两种使用媒体查询的方法 - 一种是移动优先方法，您首先为移动设备设计，然后使用最小宽度设置一个最小断点，在该断点之上应用平板电脑和桌面视图的样式。其次，使用大多数开发人员使用的桌面优先方法，您将首先设置网页的正常样式，然后使用最大宽度设置移动设计样式，因此移动设计将应用到某个断点，并且在该断点之上，将应用平板电脑或桌面样式。

所以我创建了一个简单的导航栏，它可以响应媒体查询和 flexbox。

您可以使用 javascript 添加带有汉堡包图标的切换效果

正确的导航栏示例 -