数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究网页的HTML5响应式设计
HTML5，这种最新且流行的网页设计语言，突然席卷了设计界。之前我们有HTML，现在有了HTML5。然而，如果我们看看两者之间的主要区别，我们会发现真正使HTML5与HTML不同且更好的一点是**响应式设计**。
网页的响应式设计是指网页在浏览器加载后根据媒介获得的输出或响应。
使用HTML时，存在许多局限性，这就需要一个新版本。网页设计师无法灵活地根据不断变化的技术创建网页。
最新的技术允许用户在台式机、笔记本电脑、手机、iPad等设备上访问网页。此外，所有这些设备都具有不同的尺寸。网页设计师一直在寻找一种适合所有设备的解决方案。作为回应，HTML5应运而生。
流体布局
HTML5是HTML、CSS和JavaScript的组合。它允许用户创建具有流体或灵活布局的网页，就像水一样。众所周知，水会根据容器的形状而变化，类似地，流体布局允许设计师将内容浮动在指定的容器中。同一个网站，在iPad上打开时会根据其尺寸进行调整，如果在手机上访问相同的URL，也会适应其尺寸。
我们网页设计师的另一个诉求与内容相关。如果我们想在手机屏幕上显示不同的内容，在笔记本电脑屏幕上显示不同的内容怎么办？让我用一个非常简单的例子来解释这个概念背后的心理学原理。假设，你在办公室，你的团队突然计划一个户外午餐聚会。你拿出手机，打开一个网页来查找附近的餐厅（如zomato、dineout等），然后根据你的标准筛选它们，并选择最符合你要求的餐厅。那么，如果你的团队计划在接下来的周末举行午餐聚会呢？在这种情况下，你可能会打开你的笔记本电脑；打开同一个网站的网页，浏览页面，查看优惠、装饰和附加功能。
通过这个例子，我们假设在手机上打开网页的用户可能很匆忙，没有时间四处浏览设计。用户会关注功能而不是设计用户界面。然而，当在笔记本电脑/台式机浏览器中查看同一个网页时，用户可能有时间欣赏设计部分。
响应式设计允许网页设计师压缩或拉伸页面以适应设备的屏幕区域，并隐藏/显示图像或标签。
响应式网页设计是指根据用户的设备屏幕分辨率调整布局来开发网页的概念。它允许网页设计师调整布局并首先呈现相关信息：小时数、电话号码、方向以及指向菜单的链接。同时回到你的办公桌前，餐厅的页面拥有你在手机上浏览时并不关心的所有花里胡哨的功能。
响应式网页设计 (RWD) 中的布局是使用灵活或流体布局参数（如em和百分比）而不是固定值（如像素、磅等）完成的。
为了在你的页面中实现响应式设计，页面的结构会发生改变，HTML5 的基本概念就会发挥作用。在HTML5中编写代码的基本准则是：
- 内容放在HTML文件中
- 外观和位置放在CSS文件中
- 验证放在JavaScript文件中
因此，为了获得响应式设计，我们需要根据设备的屏幕尺寸更改CSS文件，而我们的内容（位于HTML页面中）保持不变。
RWD策略
响应式网页设计使用渐进增强而不是传统的优雅降级。
优雅降级强调构建与最新和最先进的浏览器兼容的网页。展望未来，将为旧版浏览器提供支持，但预期的故障将是软件包的一部分。
而渐进增强则关注内容而非浏览器。将此概念视为内容优先的方法，就像花生M&M巧克力一样。
- 花生：用丰富的语义HTML标记的内容
- 涂上丰富的奶油CSS
添加JS作为硬糖壳
RWD框架
HTML5框架只是一个预先创建的模板，其中包含预定义的可重用CSS和JS文件以及页面上的虚拟文本作为内容。它们帮助初级开发者开始进行基本设计。布局已定义，设计已创建。
市场上有多个框架可用于实现响应式设计。最流行且易于实现的是——**Twitter Bootstrap**。此外还有Foundation、Skeleton、Boilerplate、Kickstart等等。大多数这些框架使用基于网格系统的初始布局开发。
Twitter Bootstrap采用移动优先方法，免费使用且易于安装。通用的CSS文件是软件包的一部分，有助于设计网页上的大部分元素和控件。有多种类型的布局可帮助你构建网页。
响应式网页设计是最受欢迎的技术，并且逐渐成为任何网站的标准要求。网上有大量的支持可用于实现，并且有多种工具可供使用。
211 次浏览
