2021-11-11

第一章:响应式设计基础

随着技术的发展和移动网站的普及，同时也推动着网站设计师要去重新思考他们的工作成果将如何
在不同设备上呈现。想一想，你每天在手机和电脑上浏览网页的时间哪个更长？

1.1 什么是响应式设计

简单说，响应式网站设计是一种允许设计和代码响应设备屏幕大小的方法。这意味着无论你使用的是4英寸安卓手机，iPad mini，还是40英寸的影院级显示器，你都将获得最优秀的浏览体验。

对比一下静态页面与响应式设计的网站在不同设备上的显示效果：
最好的响应式网站基本上使用流体网格、自适应图像和CSS来改变网站的设计，并根据浏览器的宽
度进行渲染。对于设计者来说，最终目标是在不同设备与平台实现无缝定制网站设计的用户界面UI和用户体验UX。

1.2 响应式设计的重要性

       如果我们为一个网站设计、开发无数个版本适应每一种设备，这个过程不仅费时而且费钱，还会使网站无法使用未来先进的技术变革，而且几乎无法维护。而响应式设计就是网站设计有效解决方案。

响应式网站设计的关键，在于了解你的受众以及他们用来浏览网站的设备。现在网站的流量有多少来自PC，多少来自平板，多少来自手机？美国网站的大约56%的流量来自移动设备。现在全球大约有26亿智能手机用户，而到2020年，这个数字预计可达到60亿。移动设计将越来越重要。
      为不同设备设计网站是至关重要的，但涉及到不同的网络浏览器就变得更加复杂了。每个大型网络浏览器都有自己的移动版本，以不同方式渲染网站。另外，每个浏览器还有不同的版本–毕竟你不能期待每个人都使用最新版。因此，设计适用于不同版本的浏览器也是非常重要的。
     当然也不用过于担心，对于业内人士来说，调整设计以适应不同版本浏览器和不同硬件设备是一场持续的战争。最好的答案就是，在尽可能多的设备上进行测试（并聘请非常棒的开发人员）

我应该按照什么尺寸设计网站？

     并不存在所谓的“标准网站尺寸”。设备的种类那么多，型号版本和屏幕分辨率一直在变。而每个网站吸引的用户所使用的设备有各有不同。比如，你很可能（在厨房里做饭时）选择在移动设备上查看菜谱，而（在想要用Photoshop做点什么时）选择在PC上搜索PS教程。
     你借助Google Analytics了解哪些浏览器和网页大小最适合你的网站。而面对浏览器大小和设备的无限组合，你到底应该怎么进行响应式设计呢？

尝试设计至少3种布局

     响应式网站设计应该针对不同浏览器宽度设计至少三种布局。下面的数字仅限举例，并不是固定标准。
·小：768px以下。大部分手机适用。
·中：768px – 992px。大部分平板设备、部分大屏手机、部分小型上网本适用。
·大：大于992px。大部分PC适用。
     这些布局中的每一个都应包含相同的文本和图形元素，但每个布局都应设计为根据用户的设备以最佳方式显示内容。缩小页面以适应小屏幕会降低内容的易读性，但如果你能将内容相应地缩小，并变成一栏，那么内容将更易于阅读。

1.3 HTML5介绍

1.3.1 什么是HTML5

     HTML5是对HTML标准的第五次修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
     HTML5的设计目的是为了在移动设备上支持多媒体。
     HTML5 是下一代 HTML 标准。
     HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
     HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

1.3.2 HTML发展历程

     HTML1.0 实际上应该没有HTML1，所谓的HTML1是1993年IETF(互联网工作任务组）团队的一个工作草案，并不是成型的标准
     HTML2.0 1995年11月作为RFC1866发布，于2000年6月RFC2854发布之后宣布过时
     HTML3.2 1996年W3C撰写新规范，并于1997年1月推出HTML3.2。
     HTML4.0与HTML4.0.1
      1997年12月18日成为W3C的推荐标准。
      1999年12月24日成为W3C的推荐标准。其中只做了细微的调整。
      2000年5月15日发布，基于HTML4.01的ISO HTML成为了国际标准化组织和国际电工委员会的标准，一直被沿用至今，虽然有小的改动，但大体方向没有四年大变化。

     XHTML1.0
     XHTML 指可扩展超文本标签语言， 是 HTML 与 XML（扩展标记语言）的结合物，包含了所有与XML 语法结合的 HTML 4.01 元素。
     2000年1月26日发布，是W3C的推荐标准，后于2002年8月1日重新发布
      XHTML1.1
      2001年5月31日发布。XHTML1.0是XML风格的HTML4.01。XHTML1.1主要是初步进行了模块化。
      XHTML2.0
      XHTML 2是一种通用的标记语言。但不及HTML5的冲击。XHTML 2的开发工作于2009年底停止，而资源将用于推动HTML 5的进展。

      HTML5.0
      HTML5本身并非技术，而是标准。它所使用的技术早已很成熟，国内通常所说的html5实际上是
      html与css3及JavaScript和api等的一个组合，大概可以用以下公式说明：
      HTML5≈HTML+CSS3+JavaScript+API.
     2012年中期，W3C推出了一个新的编辑团队，负责创建HTML 5.0推荐标准，并为下一个HTML版本准备工作草案
     WHATWG 指 Web Hypertext Application Technology Working Group。
     WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

1.4 HTML新特性

1. 语义化和结构
    HTML5提供了新的元素来创建更好的页面结构
2. 智能表单
    表单是实现用户与页面后台交互主要组成部分，HTML5在表单的设计上功能更加强大。input类型和属性的多样性大大地增强了HTML可表达的表单形式，再加上新增加的一些表单标签，使得原本需要JavaScript来实现的控件，可以直接使用HTML5的表单来实现；一些如内容提示、焦点处理、数据验证等功能，也可以通过HTML5的智能表单属性标签来完成。

3. 多媒体

HTML5最大特色之一就是支持音频视频，在通过增加了、两个标签来实现对多媒体中的音频、视频使用的支持，只要在Web网页中嵌入这两个标签，而无需第三方插件（如Flash）就可以实现音视频的播放功能

4. 绘图画布(canvas)
    HTML5的canvas元素可以实现画布功能，该元素通过自带的API结合使用JavaScript脚本语言在网页上绘制图形和处理，HTML5的canvas元素使得浏览器无需Flash或Silverlight等插件就能直接显示图形或动画图像。
5. 数据存储
    HTML5较之传统的数据存储有自已的存储方式，允许在客户端实现较大规模的数据存储
6. 地理定位
    现今移动网络备受青睐，用户对实时定位的应用越来，要求也越来越高。HTML5通过引入
Geolocation的API可以通过GPS或网络信息实现用户的定位功能，定位更加准确、灵活。通过
HTML5进行定位，除了可以定位自己的位置，还可以在他人对你开放信息的情况下获得他人的定
位信息。
1.5浏览器对HTML5的支持
   现代的浏览器都支持 HTML5。
   此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理