HTML5 的网页响应性
HTML5，最新且流行的网页设计语言，突然席卷了设计界。之前是 HTML，现在有了 HTML5。然而，如果我们仔细分析两者之间的主要区别，就会发现 HTML5 真正不同于 HTML 且优于 HTML 的地方在于其响应性。
网页的响应性是指网页根据媒介加载到浏览器后，从浏览器接收到的输出或响应。
HTML 过去存在诸多限制，因此需要新版本。随着技术的发展，网页设计师无法灵活地创建网页。
最新技术允许用户在台式机、笔记本电脑、手机、iPad 等设备上访问网页。而且，所有这些设备的尺寸各不相同。网页设计师一直在寻找一种能够适应所有设备的解决方案。HTML5 应运而生。
流动布局
HTML5 是 HTML、CSS 和 JavaScript 的结合体。它允许用户创建具有流动或灵活布局的网页，就像水一样。众所周知，水的形状与其容器的形状一致，同样，流动布局允许设计师将内容浮动在指定的容器中。同一个网站在 iPad 上打开时会根据容器的尺寸进行调整，如果在移动设备上访问相同的 URL，也会适应容器的尺寸。
我们的网页设计师的另一个需求与内容有关。如果我们想在移动设备屏幕上显示不同的内容，并在笔记本电脑屏幕上显示不同的内容，该怎么办?让我用一个非常简单的例子来解释这个概念背后的心理学理论。假设你在办公室，突然你的团队计划举办一场户外午餐聚会。你拿出手机打开网页，搜索附近的餐厅(比如zomato、dineout等)，然后根据你的标准进行筛选，选择最符合你需求的一家。现在，如果你的团队计划在即将到来的周末举办一场午餐聚会，你该怎么办?在这种情况下，你可能会打开笔记本电脑;打开同一个网站的网页，浏览页面，查看网站上的优惠、附加功能和插件。
在这个例子中，我们假设在手机上打开网页的用户可能很匆忙，没有时间浏览设计。用户会寻找功能而不是设计师的UI。然而，当在笔记本电脑/台式电脑浏览器中浏览同一网页时，用户可能有时间欣赏设计部分。
响应式设计允许网页设计师挤压或拉伸页面以适应设备的屏幕区域，并隐藏/显示图像或标签。
响应式网页设计是指根据用户设备屏幕分辨率调整布局来开发网页的概念。它允许网页设计师调整布局并优先呈现相关信息:营业时间、电话号码、路线，或许还有菜单链接。与此同时，回到您的办公桌前，餐厅的页面拥有您在手机上浏览时可能不屑一顾的所有花哨功能。
响应式网页设计 (RWD) 中的布局使用灵活或流动的布局参数(例如 em 和百分比)，而不是有限的值(例如像素、点等)。
为了使您的页面具有响应性，页面结构发生了变化，并引入了 HTML5 的基本概念。使用 HTML5 编写代码的基本准则如下:
- 内容放在 HTML 文件中
- 外观和布局放在 CSS 文件中
- 验证放在 JavaScript 文件中
因此，为了实现响应式设计，我们需要根据设备屏幕尺寸的变化替换 CSS 文件，而内容(即 HTML 页面)保持不变。
响应式网页设计策略
响应式网页设计采用渐进增强模式，而非传统的优雅降级模式。
优雅降级模式强调构建与最新、最先进浏览器兼容的网页。未来，我们将提供对旧版浏览器的支持，但预期的故障仍将存在。
而渐进增强模式则侧重于内容，而非浏览器。将此概念作为内容输出方法，就像花生 M&M 巧克力的情况一样。
- 花生:内容以富语义 HTML 标记
- 包裹着丰富的 CSS
添加 JS 作为硬糖外壳
RWD 框架
HTML5 框架只是预先创建的模板，包含预定义的可重用 CSS 和 JS 文件以及虚拟文本作为页面内容。它们帮助新手开发人员从基础设计开始。定义布局并创建设计。
市面上有多种框架可用于实现响应式设计。最流行且易于实现的是 - Twitter Bootstrap。此外，还有 Foundation、Skeleton、Boilerplate、Kickstart 等等。这些框架大多使用网格系统进行初始布局开发。
Twitter Bootstrap 采用移动优先的理念，免费使用且易于安装。通用 CSS 文件是软件包的一部分，用于帮助设计网页上的大部分元素和控件。各种布局类型可供您构建网页。
响应式网页设计是最受追捧的技术，并且正在逐渐成为任何网站的标准要求。目前有大量的在线支持可供实施，并且有多种工具可供使用。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
