《响应式Web设计- HTML5和CSS3实战》读书心得

发表于 更新于 分类于

响应式设计是使用一套代码为各类设备提供良好设计效果和使用体验的最佳设计方法。响应式设计中，我们力求精简、语义和内容优先。响应式网页设计（RWD，Responsive Web Design），是将三种已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）联合起来的一种网页设计技术。（个人注：这里的媒体是指使用网页的设备。）。
和以前的网页设计以桌面电脑为中心的设计思想不同的是，响应式方法论是先针对小视窗进行设计，然后逐步针对大视窗进行渐进增强支持。这就是一种为“未知设备”而设计的思想。但是，虽然说响应式设计有自己的优势，但是专门设计的手机版页面也有其优势，例如手机版（非响应式设计）网站可以基于增强现实功能、用户当前GPS位置功能。所以说，在预算允许的情况下，一个完全定制的“移动版”网站比响应式设计更适合。
按照作者所说，我们应该把精力花在更有价值的地方。所以，HTML5、CSS3技术，给我们提供了很多简单的、语义明确的、功能强大的工具，让网页设计人员能把精力放在内容上，而不是形式上。HTML5、CSS3的出现，使网页的设计达到了飞跃的发展，使我们对JavaScript的依赖降低到最小的限度。

一、HTML5的新特性

1、新的语义标签

新的语义标签能更简洁的创建代码、创建更具语义的网页。包括新的结构元素、视频、音频标签。
语义化就是标签赋予意义的过程。

2、提供了针对表单处理和用户输入的特定工具

这些特性大大节省了为表单验证这类工作而在复杂技术如JavaScript上耗费的精力。
增加了电话号码、电子邮件及URL的输入类型检查；并且，键盘还可以根据这些输入类型自动调整键盘的样式。还包括颜色、搜索、日期及时间等类型。
占位符的支持：表单域中都有占位符文字，如果聚焦该域，其中的占位符文字就会自动消失；如果失去焦点，又重新显示；

二、CSS3的新特性

CSS（层叠样式表）作为一种将设计与内容分离的方法引入。支持外部样式表（独立文件）、内部样式表（文件内）、内联样式表（元素内）。所谓层叠，就是只样式表中后面的样式会覆盖前面相同的样式。重置样式就是一组CSS声明，用来覆盖不同浏览器渲染HTML元素时的各种默认样式。

1、能简单的实现网页视觉及动态效果。

使用CSS3制作动画比JavaScript或Flash更轻量级，更好维护，因此对响应设计来说很理想，同时可以大幅减少视觉效果对图片的依赖。
CSS3中的选择器([alt])，让我们可以选择页面中任何我们想要的元素。而过去我们需要使用JavaScript库（如jQuery）来做复杂的元素选择。
一些熟悉CSS3的同志早就看不惯动不动就使用Javascript的做法了，他们正想方设法收复失地，虽然CSS3不可能短期内取代jQuery或类似的框架。

2、支持媒体查询

设备可视区域，也叫“视口”。
在不改变页面内容的情况下，根据使用设备的视口来选择相关的显示样式和效果。
媒体查询支持的特性由：width、height、color等；但在设计的时候，需要考虑不同设备内容模块显示顺序的重要性和差异性。这时候，“内容优先”的原则是合理的做法。

3、支持流式布局

流式布局又称等比缩放布局，使用百分比设定宽度。流式布局，使得页面能在某个宽度内自由伸缩。
传统的基于像素的布局，优点是更加接近印刷设计，保证不同的显示器出来的效果是一样的。

4、媒体查询与流式布局的组合

使用百分比布局创建流动的弹性界面，同时，使用媒体查询来限制元素的变动范围，将这两者组合到一起构成了响应式设计的核心，基于此可以创造出真正完美的设计。

三、怎么说服客户接纳响应式网页设计技术

文章摘录

  • Chrome，调整浏览器分辨率模拟各种设备的插件，Windows Resizer。
  • 前端的瑞士军刀：Modernizr 包括了好多最佳实践的HTML5的样板文件。
  • IOS模拟器、Android模拟器，可以模拟相关的手机。
  • 使用多个独立的文件会增加页面渲染的HTTP请求数量，从而导致页面加载变慢。所以，雪碧图也是为了解决这个问题。
  • 页面的主要结构：头部、导航、侧边栏、内容以及页脚。
  • 单位：em 相对单位，相对上下文的字体的比例。 em是书面形式的大写字母“M”的简称，发音和M相同。以前，“M”常被用来测定某种字体的大小，因为它是英文字母中最大（最宽）的字母。
  • 现代浏览器的默认文字大小都是16像素。
  • 如果你指向讲某个元素包裹起来以便于设置样式，那应该还是使用<div>。
  • 可缩放矢量图形 SVG
  • CSS沿用了在Flash和其它基于时间线的应用程序中被广发使用的动画关键帧技术。
    CSS3动画由两部分组成：首先是关键帧声明，然后在动画属性中使用该关键帧声明。
  • jQuery 是JavaScript框架，定义了一组API，方便JavaScript调用操作页面元素（DOM）。
  • span 元素的作用公司选择指定特定文本，以便于指定特殊的样式，这些特性由CSS控制。
    meta 元素提供相关页面的元信息，格式是名称/值对。（单闭合元素，不需要关闭标签）
    ul 元素定义无序列表