响应式网页设计的基石：CSS、HTML、媒体查询、Fluid、Flexbox 布局、动画

CSS 和 HTML

响应式设计的基础是 HTML 和 CSS 这两种可以控制的语言的组合。任意 给定 Web 浏览器中页面的内容和外观。

HTML和CSS（图片来源：codingdojo.com）

HTML主要控制网页的结构、元素和内容。例如，如果您想向网站添加图像，则必须使用如下 HTML 代码：

您可以输入“class”或“ id "，然后使用 CSS 代码作为目标。

您还可以控制重要的 HTML 属性，例如高度和宽度，但这不再被视为最佳实践。

相反，CSS 用于调整 HTML 页面中元素的外观和布局。 CSS 代码可以包含在 HTML 文档的 部分中，或作为单独的样式表文件。

例如，我们可以在元素级别更改任何 HTML 图像的宽度，如下所示： img {width: 100%;}

或者我们可以通过在其前面添加句点“full”来定位特定类。 -宽度-img”。 .full-width-img {width: 100%;}

除了高度、宽度和颜色之外，您还可以控制布局。当您将 CSS 与查询技术结合起来时，像这样使用 CSS 可以使您的设计具有响应能力。

媒体查询

媒体查询是CSS3的基本组成部分，它允许您根据不同的因素（例如屏幕尺寸或分辨率）呈现内容。

台式机、平板电脑、智能手机的媒体查询

它类似于某些编程语言中的“if 子句”，它基本上在执行适当的代码之前检查 porte de view 是否存在 或 Wide 。自由的。 @media screen 和 (min-width: 780px) {.full-width-img {margin: auto;width: 90%;}

如果宽度至少为 780 像素，则“full-width-img ”班级图片占据屏幕的 90%，并自动生成宽边距。

流体布局

流体布局是现代响应式设计的重要组成部分。在过去，您为每个 HTML 元素设置一个静态值，例如 600 像素。

相比之下，流体布局取决于动态值，例如端口宽度的百分比。

流体放置示例

此方法将根据屏幕尺寸增加或减少不同存储元素的尺寸。

Flexbox 布局

虽然基于百分比的布局很扎实，但许多设计师和网页设计师觉得它不够动态或不灵活。 Flexbox 是一个 CSS 模块，旨在以更有效的方式放置多个元素，即使容器内内容的大小未知。

柔性容器可扩展物品以填充空间或缩小物品以防止装满。这些 Flex 容器具有许多独特的属性，例如 justify-content，您无法使用标准 HTML 元素更改这些属性。

Flexbox 容器

这是一个棘手的主题，因此如果您想在设计中使用它，您应该阅读我们的 Flexbox CSS 技巧指南。

响应式图形

最基本的动画渲染遵循与流体渲染相同的概念，使用动态元素来控制宽度或高度。我们之前包含的示例 CSS 代码已经做到了这一点： img {width: 100%;}

% 该元素接近视口宽度或高度的百分比，并确保图像保持与屏幕相同。

这种方法的问题是每个用户都必须下载全尺寸图像，即使在移动设备上也是如此。

如果想为不同的设备提供不同的版本，需要在img标签中使用HTML属性srcset来指定多种尺寸可供选择。

WordPress 会自动使用此功能来嵌入帖子或页面中的图像。

速度

当尝试为您的网站创建响应式设计时，速度应该是优先考虑的。

2 秒内加载的页面的平均跳出率为 9%，而持续 5 秒的页面产生 38% 的跳出率。

您的回复方法不能阻止或延迟页面的初始发布超出必要的范围。

有多种方法可以加快页面速度。优化图形、实现缓存、缩小、使用更高效的 CSS 布局、防止 JS 阻塞以及改进关键渲染路径都是您应该考虑的好主意。

您还可以尝试为您的移动页面实施 Google AMP，但在我们的 Google AMP 案例研究中，我们的移动潜在客户下降了 59%。