《响应式Web设计——HTML5和CSS3实战》读书笔记

作者介绍：英国前端工程师，Ben Frain, the author of two web development books:  ‘Responsive web design with HTML5 and CSS3′ 1 and  ‘Sass and Compass for Designers’ ，作者网站： http://benfrain.com/  响应式网页设计是由Ethan Marcotte提出，他在A List Apart发表了一篇开创性的文章，将弹性网格布局、弹性图片和媒体查询结合起来，并命名为响应式网页设计。

采用 RWD 设计的网站使用 CSS3   Media queries ，即一种对  @media  规则的扩展，以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备：
Media queries允许网页根据访问站点设备的特点而使用不同 CSS 样式规则，最常用的是 浏览器 的宽度。
流式网格概念要求页面元素使用相对单位如百分比或  字体排印学  调整大小，而不是绝对的单位如 像素 或 点 。
灵活的图像也以相对单位调整大小（最大到 100%），以防止它们显示在包含它们的 元素 外面。
媒体查询：支持不同的视口
举例说明：

拥抱流式布局

一个重要的公式：目标元素宽度/上下文元素宽度=百分比宽度
使用em代替px。

为不同的屏幕尺寸提供不同的图片
Adaptive Images( http://adaptive-images.com/ )的使用

CSS网格系统
Columnal( http://www.columnal.com/ )的使用

HTML5的全新语义化元素：

<session>:用于定义文档或应用程序的区域。
<nav>:导航区域
<article>：包裹独立的内容片断
<aside>与主页内容松散相关的内容。
<hgroup>：大纲文档。网上在线生成大纲网址： http://gsnedders.html5.org/outliner/
<header>:
<footer>:
<address>
<b>:文本加粗
<em>：强调
<i>:斜体

一个新的概念：遵循WAI-ARIA实现无障碍站点( http://www.w3.org/WAI/intro/aria )
     
     WAI-ARIA((Web Accessibility Initiative - Accessible Rich Internet Applications) i), the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. Currently certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. WAI-ARIA addresses these accessibility challenges, for example, by defining new ways for functionality to be provided to assistive technology. With WAI-ARIA, developers can make advanced Web applications accessible and usable to people with disabilities.
在HTML5中嵌入媒体

CSS3：选择器、字体和颜色模式
一个免费的css前缀生成器： http://leaverou.github.io/prefixfree/

了解CSS3和HTML5新特性的网址： http://caniuse.com/
     column-count、column-gap、word-wrap等属性
CSS3新增的选择器
img[alt]
1.字符串匹配属性选择器

匹配开头
Element[attribute^=“value”]
匹配包含
Element[attribute*=“value”]
匹配结尾
Element[attribute$=“value"]
2.li 选择器

li:first-child
li:last-child
li:nth-child

3. 否定（:not）选择器

自定义网页字体

@font-face规则

网上字体资源: https://www.google.com/fonts 和 http://www.fontsquirrel.com/ 和 https://typekit.com/

阴影
字体阴影
text-shadow
盒阴影
box-shadow

参考： https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

渐变色：     background: linear-gradient(90deg,#ffffff 0%,#e4e4e4 50%,#ffffff 100%);
想写一个优美的CSS3渐变有些难度，网上有在线的渐变生成器（ http://colorzilla.com/gradient-editor/ ）。
同样，推荐一个背景渐变网址： http://lea.verou.me/css3patterns/

参考： https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

使用css预处理器轻松编写css3代码

最流行的SASS和LESS（ http://www.lesscss.net/article/home.html ）。
LESS介绍：LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。 
在mac上下载koala（koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。
 ）进行编辑。

可缩放图标
网址推荐： http://fico.lensco.be/

 a:link，定义正常链接的样式；    
a:visited，定义已访问过链接的样式；     
a:hover，定义鼠标悬浮在链接上时的样式；  
 a:active，定义鼠标点击链接时的样式。 
css3过渡、变形和动画

过渡就是定义从一个状态到另一个状态的过程。
     transition-property: all;
     transition-duration: 2s;
     transition-delay: 0s;
     transition-timing-function: ease;

变形：
transform:scale(2);
transform:rotate(90deg);

用HTML5和CSS3征服表单
解决跨浏览器问题
利用IE Tester检测iel浏览器的问题
html5的验证网址： http://validator.w3.org/ 和 http://validator.nu/
使用respond.js和moderizr.js

附录：
1. 响应式设计被  .net 杂志  列为 2012 年顶级网页设计趋势的第二名 (渐进增强是第一名)。其中渐进增强的概念是： 一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。 而相交于渐进增强的另一个概念优雅降级（graceful degradation）则是：一开始就构建站点的完整功能，然后针对浏览器测试和修复。
2.Hybird App的优势：可是当下基于HTML5的Web App更是雾里看花，在用户入口习惯、分发渠道和应用体验这三个核心问题没解决之前，Web App也很难得以爆发。正是在这样是机缘巧合下，基于HTML5低成本跨平台开发优势又兼具Native App特质的Hybrid App技术杀入混战，并且很快吸引了众人的目光。
资源网站：
1.www.panic.com/blog/
参考网页：
http://zh.wikipedia.org/wiki/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1