响应式Web设计：HTML5和CSS3实战读书笔记

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_33910460

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量605

点赞数

文章标签： javascript 移动开发 php ViewUI

响应式Web设计：HTML5和CSS3实战

Responsive Web Design with HTML5 and CSS3

By : Pandao pandao####vip.qq.com
UpdateTime : 2013-08-21

第1章 HTML5、CSS3及响应式设计入门

第2章媒体查询：支持不同的视口

第3章拥抱流式布局

第4章响应式设计中的HTML5

第5章 CSS3：选择器、字体和颜色模式

第6章用CSS3创造令人惊艳的美

第7章 CSS3过渡、变形和动画

第8章用HTML5和CSS3征服表单

第9章解决跨浏览器问题

第1章 HTML5、CSS3及响应式设计入门

浏览客户端统计数据： http://gs.statcounter.com/

使用移动客户端浏览网页的用户越来越多

响应式设计不一定是最佳的选择

响应式网页设计RWD，Responsive Web Ddesign，由伊桑·马科特Ethan Marcotte提出人，他将三种已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页设计。

http://www.alistapart.com/articles/responsive-web-design/

它是针对任意设备对网页内容进行完美布局的一种显示机制。

渐进增强：先针对小屏幕设计，再逐步扩展到针对大屏幕的设计。

不要再迷恋px这种绝对度量单位，要使用相对度量单位（em或百分比）。

视口（Viewport）调试工具：

IE：IE Developer Toolbar

Safari：ResizeMe或Resize

FireFox：Firesizer

Chrome：Windows Resizer

视口不同于屏幕尺寸，它是指浏览器窗口内的内容区域，也就是网页实际显示的区域。

一个响应式设计创意收集网站： http://mediaqueri.es/

更简单的HTML5

文档类型声明：<!DOCTYPE html>

引用JS文件：<script src="js/jquery.min.js"></script> //type属性不再是必需的

新增的语义化标签元素：header、nav、section等

CSS3为响应式网页设计和更多创新奠定了基础

CSS3圆角：border-radius

CSS3渐变背景：/*向下兼容*/ background-image:-webkit-linear-gradient(#ffcc00, #fffcc0);

从以桌面设备为中心到以未知设备为设计中心的思想。

第2章媒体查询：支持不同的视口

支持媒体查询的浏览器：IE9+、FireFox 3.6+、Safari 4+、Chrome 4+、Opera 9.5+、iOS Safari 3.2+、Opera Mobile 10+、Android 2.1+

媒体查询语法：

@media screen and (max-width : 960px) {

body {……}

}

通过<link>标签的media属性为样式表指定设备类型：

/*纵向放置的屏幕*/

/*非纵向放置的屏幕*/
<link rel="stylesheet" media="not screen and (orientation:portrait)" href="not-portrait-screen-style.css" />

/*多个表达式组合媒体查询，限制只有视口宽度大于800像素的显示屏设备才能加载文件*/

/*查询列表中的任意一个为真，则加载文件，不为真则不加载，媒体查询之间为逗号分隔，本例样式会应用于投影仪*/
<link rel="stylesheet" media="screen and (orientation:portrait) and (max-width:800px), projection" href="800wide-screen-style.css" />

/*屏幕宽度小于等于400像素时*/

@media screen and (max-device-width : 400px) {

h1{color:red;}

}

/*CSS的@import指令按媒体加载,@import方式会增加HTTP请求*/

@import url("phone.css") screen and (max-width:360px);

媒体查询能检测的特性：

width : 视口宽度
height : 视口高度
device-width ：设备屏幕宽度
device-height : 设备屏幕高度
orientation : 检查设备处于横向还是纵向
aspect-ratio : 视口宽度和高度的宽高比，例如：一个16：9比例的显示屏可以这样定义aspect-ratio : 16/9;
device-aspect-ratio : 设备屏幕宽度和高度的宽高比；
color : 每种颜色的位数，例如min-color:16会检测设备是否拥有16位颜色；
color-index ：设备的颜色索引表中的颜色数，值必须是非负数的；
monochrome : 检测单色帧缓冲区中每像素所使用的位数，值必须是非负数的，例如：monochrome : 2;
resolution : 用来检测屏幕或打印机的分辨率，如min-resolution : 300dpi，每厘米像素点数的度量值，如min-resolution : 118dpcm;
scan : 电视机的扫描方式，值可设为progressive（逐行扫描）或者interlace（隔行扫描），如720p HD 电视（720p的p表示逐行扫描）,scan : progressive，而1080i HD 电视的i表示隔行扫描，匹配scan : interlace ;
grid : 用来检测输出设备是网格设备还是位图设备；

以上特性，除了scan和grid之外，都可使用min和max前缀来创建一个查询范围，例如：

/*视口宽度介于200px至360px之间的设备*/

@import url("phone.css") screen and (min-width : 200px) and (max-width : 360px);

层叠是指样式表中后面的样式会覆盖前面相同的样式，我们可以在样式表的开头设置基本样式，再用媒体查询来重写相应的部分；例如先针对大视口设计，再针对小视口设计；

将不同媒体查询的样式保存到独立的文件中没有太大好处，会增加HTTP请求数；

Respond.js是为IE8及更低版本增加媒体查询支持的最快的JS工具，但它目前无法解析CSS的@import命令；

http://github.com/scottjehl/Respond

可以先固定宽度着手设计；

重置样式reset.css，覆盖不同浏览器的各种默认样式

Eric Meyer : http://meyerweb.com/eric/tools/css/reset/

Dan Cederholm : http://simplebits.com

针对HTML5的：normalize.css http://necolas.github.com/nomalize.css/

阻止移动浏览器自动调整页面大小

下例为将页面放大两倍，width=device-width告诉浏览器页面的宽度应该等于设备宽度：

控制页面可缩放的范围：

禁止缩放，一般是不禁止

所有浏览器不缩放页面：设置缩放比例为1.0，按视口的实际大小来渲染页面，将宽度设置为设备宽度，意味着浏览器将会按设备宽度的实际大小来渲染页面：

W3C在CSS中引入@viewport声明，目前Opera Mobile支持，不过要加私有前缀，@-o-viewport{width:320px;}：

/*将浏览器的视口宽度设置为320px*/

@viewport {width:320px;}

响应式设计要遵循内容优先原则，媒体查询只是基础，真正实现要综合利用流式布局、弹性图片和弹性音频 /视频等;

第3章拥抱流式布局

使用百分比布局创建流动的弹性界面，同时用媒体查询来限制元素的变动范围，两者组合在一起构成了响应式设计的核心。

将固定尺寸转换为相对尺寸的公式：

目标元素宽度 / 上下文元素宽度（父对象元素） = 百分比宽度

用em代替px（IE只能缩放em单位，不支持px缩放）

上面的公式同样可以用于文字的像素单位转换为相对单位，例如：浏览器的默认字体大小是16px，那么有一个元素的字体大小是48px，转换为em则为，48 / 16 = 3em

em是书面形式的大写字母”M“的简称，发音和M相同，指的是特定字母和宽度和高度相对于特定字体磅值的比例。

弹性图片（多媒体）

img, object, video, embed {max-width : 100%;height:auto;} /*IE7+，记得先删除img等标签的宽度和高度属性并提供一个最大视口时能匹配尺寸的图片*/

给弹性图片设置阀值：max-width

为不同的屏幕尺寸提供不同的图片

1、Filament Group的响应式图片： http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

Demo Page : http://filamentgroup.com/examples/responsive-images/

原理：先加载一个JS文件，然后设置标签为<img src="small.r.jpg" data-fullsrc="large.jpg">，再用JS处理和替换。

2、Matt Wilcox的自适应图片： http://adaptive-images.com/

原理：结合Apache、PHP和GD库，依赖WEB服务器端编程。

流动网格布局和媒体查询的默契配合(从大视口匹配到小视口)

@media screen and (min-width : 1001px) and (max-width:1080px) {

h1{font-size:1.4em;}

}

@media screen and (min-width : 805px) and (max-width:1000px) {

h1{font-size:1.25em;}

}

@media screen and (min-width : 769px) and (max-width:804px) {

h1{font-size:1.1em;}

}

CSS网格系统

1、一些支持响应式的网格框架

Semantic http://semantic.gs/

Skeleton http://getskeleton.com/

Less Framework http://lessframework.com/

1140 CSS Grid http://cssgrid.net/

Columnal http://www.columnal.com/

固定宽度的CSS网格框架：960.gs

“移动优先”的思想

第4章响应式设计中的HTML5

腻子脚本（polyfill）这个词是由Remy Sharp提出的，意指使用腻子来补平老版浏览器的缺陷，具体指一段能给老版本浏览器带来新特性的JS代码。

Sjoerd Visscher发现如果用JS创建HTML5新元素标签，IE能识别这些元素并可设置样式，基于这个发现，JS专家Remy Sharp开发了一个轻量级的增强脚本

http://remysharp.com/2009/01/07/html5-enabling-script/

一个新增强脚本(让IE支持HTML5+CSS3等特性)：

Modernizr http://www.modernizr.com/

HTML5样板文件： http://html5boilerplate.com/

HTML5文件头写法：

<!DOCTYPE html>

<head>

相比于XHTML 1.0的严格要求，HTML5不要标签必须小写（可以任意大小写），属性值必须用双引号，标签必须闭合等等。（评：对于有代码洁癖的我(人)来说，这太不好了！）

伟大的<a>标签：可以在a标签内嵌套任意标签，除了a和表单标签。

HTML5废弃的属性或标签：如script标签的language属性等。

http://dev.w3.org/html5/spec/Overview.html#non-configming-features

标签语义化是给标签赋予意义的过程。

HTML5的全新语义化元素

<section> 元素用来定义文档或应用程序中的区域、内容块、版块或节

http://dev.w3.org/html5/spec/Overview.html#the-section-element

<nav> 元素用来定义文档的主导航区域

http://dev.w3.org/html5/spec/Overview.html#the-nav-element

<article>元素用来包裹独立的内容片段

http://dev.w3.org/html5/spec/Overview.html#the-article-element

<aside>元素用来表示与页面主内容松散相关的内容，例如用来作侧边栏、引文、广告或者导航元素（如友情链接等）。

http://dev.w3.org/html5/spec/Overview.html#the-aside-element

<hgroup>用来包裹一组使用h1、h2、h3等标签的标题、标语和副标题

http://dev.w3.org/html5/spec/Overview.html#the-hgroup-element

HTML5的大纲结构算法可以自动组织好大纲，可以在每个容器中任意使用任何级别的标题元素。

HTML5大纲生成器：

http://gsneders.html5.org/outliner/

http://hoyois.github.com/html5outliner/

<header>元素用作网站头部的“刊头“区域，也可用作<article>元素的简要介绍，不计入大纲结构。

http://dev.w3.org/html5/spec/Overview.html#the-header-element

<footer>元素用来作网页的页脚或者<article>的文脚

http://dev.w3.org/html5/spec/Overview.html#the-footer-element

<address>元素用于明确地标注离其最近的<article>或<body>祖先元素的联系信息，为避免混淆，一般不用具体的邮政地址，除非确实需要联系地址。

http://dev.w3.org/html5/spec/Overview.html#the-address-element

HTML5结构元素的实际用法

header、nav、footer标签可以任意使用，每个article和section都可以有自己的头部、脚注和导航：

</header>

</article>

</div>

……

</footer>

HTML5的文本级语义元素(行内元素标签)

http://dev.w3.org/html5/spec/Overview.html#text-level-semantics

<b>表示加粗和强调的文本

<em>强调内容中的重点

<i>文字斜体效果

WAI-ARIA无障碍网页应用技术

它主要解决一个问题：让残障人士能无障碍地访问网页上的动态内容。

http://www.w3.org/WAI/intro/aria

支持无障碍网页技术的屏幕阅读器

ARIA的地标角色属性role，例如：

针对文档结构的各部分分别有如下的地标角色：

application 用来定义用作网页应用的区域
banner 用来定义一个站点级别的区域，如网页的头部和logo
complementary 用来定义一个对页面主要区域进行补充说明的区域，例如侧边栏某个内容块的标题等
contentinfo 用来定义与页面主要内容相关的信息区域，例如页面的版权信息区域；
form 用来定义表单
main 用来定义页面的主体内容
navigation 用来定义链向当前文档或者相关文档的导航链接
serach 用来定义一个用于搜索的区域

无障碍网页应用技术进阶：

http://www.w3.org/TR/wai-aria/roles#role-definitions

在Windows下使用非可视桌面阅读器NVDA免费测试网站可访问性，官网： http://www.nvda-project.org/

这使用了无障碍技术的元素设置样式：nav[role="navigation"]{……}

使用HTML5的视频或音频标签

<video src="video/intro.mp4" width="640" height="480" controls autoplay preload="auto" loop poster="video/intro-poster.jpg">你的浏览器不支持视频播放</video>

controls 属性表示显示播放控制栏

autoplay 属性表示自动播放

preload 属性表示预加载媒体

loop 属性表示循环播放

poster 属性表示媒体的预览或缩略图

提供备用的媒体源文件

Safari只允许<video>和<audio>元素中使用MP4/H.264/AAC格式的媒体文件；
Firefox和Opera只支持Ogg和WebM格式；

媒体标签内嵌套支持多种媒体格式

对不起，您的浏览器不支持这种视频格式。

</video>

针对老版本浏览器的备用方案，如果没有任何支持的播放技术则提示下载视频

</object>

MP4格式：<a href="video/intro.mp4">MP4</a>

Ogg格式：<a href="video/intro.ogv">Ogg</a>

对不起，您的浏览器不支持这种视频格式。

</video>

响应式视频

删除width和height属性，然后用CSS控制：video{max-width:100%;height:auto;}

解决使用iframe嵌入视频的响应问题，例如Youtube和Vimeo等视频网站，使用一个叫FitVids的jQuery插件来解决这个问题：

$(function(){

$("#content").fitvids();

});

</script>

下载地址： http://fitvidsjs.com/

FitVids介绍文章： http://daverupert.com/2011/09/responsive-video-embeds-with-fitvids/

离线Web应用，很简单

运行机制是每个需要离线使用的网页都指定一个后缀为.manifest的文本文件，这个文件罗列了该网页离线使用时所需的所有资源文件（HTML、图片、JS等等），浏览器会自动读取该文件，下载文件中罗列的资源文件，并缓存到本地以备无网络时使用。

为每个需要离线使用的页面的HTML标签中追加manifest="/offline.manifest"属性，例如：

如果使用了Apache，还需要修改.htaccess文件，以保证.manifest文件拥有正确的MIME类型，即text/cache-manifest

AddType text/cache-manifest .manifest

在.htaccess文件加上这段代码，用来阻止浏览器缓存这个离线缓存文件offline.manifest：

ExpiresActive On

ExpiresDefault "access"

</Files>

offline.manifest文件的内容格式：

CACHE MANIFEST => 必须声明的开头

#Cache Manifest v1 =>注明版本

CACHE: => 罗列离线使用所需的文件，文件的路径是相对于offline.manifest文件而言的，也可使用绝对路径；

xxxx.html

/css/xxxx.css

/img/cccc.jpg

//……

NETWORK: => 不需要被缓存的文件

* => 通配符

FALLBACK: => 部分使用 / 字符定义一个URL模板，访问时检测是否有缓存文件，如果有则显示缓存页面，没有则显示指定的offline.html文件；

//offline.html

页面被自动加载到离线缓存

一个简化了的manifest文件，不过这样只会缓存用户访问的HTML页面，不会缓存页面内引入的图片、JS等资源文件：

CACHE MANIFEST

#Cache Manifest v1 2013-08-10 19:12:05

FALLBACK:

//offline.html

NETWORK:

版本注释的用途：（修改更新manifest文件后）会使浏览器下载新版本文件并再次触发离线存储进程。

版本注释参考于《畅游HTML5》一书 http://diveintohtml5.com/

离线Web应用的故障诊断，可以使用Chrome的开发者工具的Console面板来检查哪些文件没有缓存成功或者路径是否正确等，来判断和解决问题。

离线Web应用的完整规范，详见： http://dev.w3.org/html5/spec/Overview.html#offline

第5章 CSS3：选择器、字体和颜色模式

关于IE6到8对CSS3的支持的问题：用CSS3做增强网站，而不是用它提供基本功能。

IE各版本对CSS2.1和CSS3特性的支持情况：

http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx

CSS3私有前缀及其用法

私有前缀的由来：浏览器厂商用来测试“试验性的”CSS3特性；

先列出私有前缀，后列出没有前缀的通用属性；

.border {

-moz-border-radius :10px; /*Mozilla Firefox*/

-ms-border-radius :10px; /*IE9+*/

-webkit-border-radius :10px; /*Safari and chrome*/

border-radius :10px; /*W3C*/

}

方法：建立可快速编辑CSS3前缀的代码片段和JS方案

-prefix-free http://leaverou.github.com/prefixfree/

一个可以知道目前浏览器对特定CSS3和HTML5特性的支持程序，并提供来自于 http://gs.statcounter.com/ 的全球浏览器使用率统计情况：

http://caniuse.com/

CSS3多栏布局

column-width:12em; /*每列宽度*/

column-count:4; /*列数*/

column-gap:2em; /*每列的间隔宽度*/

column-rule:thin dotted #999; /*分隔线样式*/

更多内容详见： http://www.w3.org/TR/css3-multicol/

文字换行：word-wrap:break-word; /*IE5+*/

CSS3属性选择器

/*CSS2：匹配页面所有含有alt属性的图片标签*/

img[alt]{……}

img[alt=“photo”]{……}

CSS3的子字符串匹配属性选择器

以特定前缀开头；
包含特定字符串；
以特定后缀结尾；

1、匹配开头的属性选择器

例：img[alt^="film"]{……}

2、匹配包含内容的属性选择器

例：img[alt*="film"]{……}

3、匹配结尾的属性选择器

例：img[alt$="film"]{……}

HTML5中的ID值可以是数字开头，详见： http://dev.w3.org/html5/spec/Overview.html#the-id-attribute

CSS3结构伪类

1、:last-child 伪类选择器 => 匹配最后一个元素

2、:first-child 伪类选择器 => 匹配第一个元素

display:table显示模式之表格式布局

nav{display:table;……}

nav ul{display:table-row;……}

nav ul li{display:table-cell;……} /*这样可以是每个菜单像表格单元格那样自动调整宽度和间隔*/

:nth-child (间隔匹配)选择器

例如：

表格的隔行换色

table td{background:#fff;}

table td:nth-child(even) {background:#eee;}

nth规则：

:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)

参数n可以使用整数，例如：:nth-child(2)表示列表中的第二个列表项；

也可以使用表达式，例如：

:nth-child(3n+1) 表示从第1个元素开始，每3个元素选1个；

:nth-child(2n+3) 表示从第3个元素开始，每2个元素选1个；

:nth-child(1n+2) 或者 :nth-child(n+2) 表示第2个元素后的每个元素；

:nth-child(3n-2) 表示倒数第2个元素开始，每3个元素选一个；

:nth-last-child(-n+3) 表示从DOM节点树的末尾开始算的第3个元素往后的每个元素

:nth-last-of-type 按元素类型匹配

nav ul li.item : nth-last-of-type(n+2) a{……} 表示从第二个匹配元素开始，选择每一个类名为.item的列表项；

:not 否定选择器，选择某个不满足条件的元素

nav ul li : not(.item) a{color:red;}

完整的元素状态伪类列表，详见： http://www.w3.org/TR/selectors/#UIstates

5.5.3 对伪元素的修正

CSS2伪元素的写法：

p:first-line 表示匹配<p>标签的第一行内容；

p:first-letter 表示匹配<p>标签的第一个字母；

CSS3要求必须用两个冒号来与伪类进行区别，所以要改写成这样（但是IE8及低版本无法识别）：

p::first-line 表示匹配<p>标签的第一行内容；

p::first-letter 表示匹配<p>标签的第一个字母

5.6 自定义网页字体

@font-face规则

在CSS2时已存在，后在CSS 2.1时删除，IE4+

EOT字体是IE支持的格式，其它浏览器支持TTF、WOFF、SVG格式，Chrome支持WOFF格式，iPad 2 （iOS 4.2+）支持TTF格式；

http://www.w3.org/TE/css3-fonts

使用@font-face嵌入网页字体

/*定义*/

@font-face {

font-family : '字体名';

src : url(../fonts/字体名.eot);

src : url(../fonts/字体名.eot?#iefix) format('embedded-opentype');
url(../fonts/字体名.woff) format('woff'),
url(../fonts/字体名.ttf) format('truetype'),

url(../fonts/字体名.svg#字体名) format('svg');

font-weight:normal;

font-style: normal;

}

/*使用*/

h1 {

font-family : '字体名'；

}

使用自定义字体后模糊的解决办法：设置font-weight:整数值;

真正的响应式字体单位还不能广泛使用，CSS3字体草案中引入了视口相对字体，相对单位vw（视口宽度）、vh（视口高度）、wm（视口最小边长，即vm和vh中较小的一个），目前只有IE9+支持。

http://www.w3.org/TE/css3-values/#viewport-relative-lengths

5.8 新的CSS3颜色格式和透明度

CSS3允许我们使用RGB或HSL来声明颜色，还能在这两个方法后边追加一个透明通道（分别是RGBA和HSLA）。

RGB（红绿蓝）颜色：红（0~255）、绿（0~255）、蓝（0~255）

RGBA（红绿蓝）颜色：红（0~255）、绿（0~255）、蓝（0~255）、透明度（0~1）

例：

nav ul li : nth-child(odd) a { /*匹配为odd奇数的元素*/

color : rgb(254, 3, 8);

color : rgba(254, 3, 8, 0.5); /*一半的透明度*/

}

HSL颜色：色相（0~360度）、饱和度（0~100%）、亮度（0~100%）

HSLA颜色透明通道：色相（0~360度）、饱和度（0~100%）、亮度（0~100%）、透明度（0~1）

例：

nav ul li : nth-child(odd) a {

color : #fe0208; /*为IE8及更低版本提供备用颜色*/

color : hsl(359, 99%, 50%);

color : hsla(359, 99%, 50%, 0.5); /*一半的透明度*/

}

为什么不使用opacity？

因为它会对整个元素产生影响，例如元素的背景及其包含的内容或文本都会透明，RGBA和HSLA则只透明背景，不会对内容产生影响。

CSS3颜色模块是第一个成为推荐标准的模块，和CSS3选择器模块一样，它可以放心使用。

第6章用CSS3创造令人惊艳的美

用CSS3来替代图片能有效地减少HTTP请求，从而使网页加载更快。

6.1 文字阴影

text-shadow : x轴(水平、横向)偏移位置, y轴(垂直、竖向)偏移位置, 阴影大小, 颜色或透明度;

例：

xxx {

/*颜色值使用HEX、HSL或RGB都可以*/

text-shadow : 1px 1px 1px #ccc; /*针对不支持RGBA或HSLA的浏览器的备用方案*/

text-shadow : 1px 1px 1px rgba(255, 255, 255, 0.5);

text-shadow : 1px 1px 1px hsla(359, 50%, 60%, 0.5);

/*阴影值可以使用px、em、rem单位*/

取消文字阴影 text-shadow : none;

多重文字阴影，用逗号来分隔多组值，例如：text-shadow : 1px 1px 1px #ccc, 10px 10px 10px #ddd;

}

更多用法，详见： http://www.w3.org/TR/css3-text/#text-shadow

6.2 盒阴影

box-shadow : x轴(水平、横向)偏移位置, y轴(垂直、竖向)偏移位置, 阴影大小, 颜色或透明度;

例：

xxx {

box-shadow : 1px 1px 1px #ddd;

box-shadow : inset 0 0 40px #ccc; /*内阴影*/

box-shadow : 1px 1px 1px #ddd, inset 0 0 40px #ccc, inset 0 20px 40px #ccc; /*多重阴影*/

}

更多用法，详见： http://www.w3.org/TR/css3-background/#box-shadow

6.3 背景渐变 IE10+

线性背景渐变：

background : linear-gradient(渐变角度：整数值deg/center/to top right => 朝右上角, 过渡颜色点 : 颜色值百分比位置, 过渡颜色点 : 颜色值百分比位置, …… );

http://www.w3.org/TR/css3-images/#linear-gradients

例：background : linear-gradient(90deg, #fff 20%, #ddd 40%, #ccc #60%, ……, #999 100%);

径向背景渐变

background : radial-gradient(渐变起点(x y), 形状大小 : 渐变形状形状大小, 过渡颜色点 : 颜色百分比, 终点颜色 : 颜色百分比);

http://www.w3.org/TR/css3-images/#radial-gradients

例：

background : radial-gradient(center, ellipse over, #ffffff 72%, #dddddd 100%);

center表示起点为元素中心点，也可以用px等；

渐变形状有：

circle 圆形
ellipse 椭圆形

形状大小值有：

closest-side 渐变形状是圆形时，以距离中心点最近的一边为渐变半径，或者渐变形状为椭圆形时，以距离中心点最近的一角为渐变半径；
closest-corner 以距离中心点最近的一角为渐变半径；
farthest-side 和 closest-side 相反，是以距离中心点最远的一边为渐变半径；
farthest-corner 以距离中心点最远的一角为渐变半径；
cover 和 farthest-corner 完全一样；
contain 和 closest-side 完全一样；

一个在线CSS3渐变生成器： http://www.colorzilla.com/gradient-editor/

重复渐变（类似于波纹）

background : repeat-linear-gradient(90deg, #ffffff 0px, hsla(322, 50%, 25%, 0.2), 5px); /*5px表示每隔5px为起点画渐变*/

background : repeat-radial-gradient(2px 2px, ellipse, hsla(322, 50%, 25%, 0.2) 5px, hsla(322, 75%, 50%, 0.6) 15px, hsla(322, 100%, 100%, 0.8) 35px);

背景渐变图案

body {

background-image :

radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),

repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0, hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla(0, 0%, 87%, 0.31)25px, transparent 50px);

background-size : 30px 30px, 90px 90px;

background-position : 0 0;

}

一个收集CSS3背景渐变图案的网站： http://lea.verou.me/css3patterns/

CSS3预处理器

SASS http://sass-lang.com/

LESS http://lesscss.org/

多重背景图片 IE9+

例：background : url(../images/xx.jpg), url(../images/xx.jpg), url(../images/xx.jpg) top left, #fff;

背景图片大小

例：background-size : 100% 50%, 300px 400px, auto;

图片大小值可以用百分比或者像素值，也可以用以下几个预定义值：

auto 表示图片的原始大小；
cover 表示按原始图片的长宽比例缩放图片以填充整个元素区域；
contain 表示按原始图片的长宽比例缩放图片以使其较长的一边适应元素大小；

参考文档：

http://www.w3.org/TR/css3-background/#layering

http://www.w3.org/TR/css3-background/#the-background-size

http://www.w3.org/TR/css3-background/#the-background-position

利用@font-face实现可缩放图标，一个图标字体资源网站： http://fico.lensco.be/

第7章 CSS3过渡、变形和动画

CSS3过渡动画

例：

/*按钮悬停动画*/

#content a{

background:green;

transition : all 1s ease 0s; /*声明在开始的元素上，鼠标悬停时会自动过渡到hover状态*/

}

#content a:hover{

background:red;

}

过渡相关的属性

transition-property 定义要过渡的CSS属性名称或者all;
transition-duration 定义过渡效果持续的时间，单位为秒，例如：1s, 1.2s, 3s等；
transition-timing-function 定义缓动函数(效果)，即动画过渡期间速度是如何变化，例如：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier等；
transition-delay 可选，用于定义过渡开始前的延迟时间，如果值为负数，可以让过渡效果立即开始，但过渡旅程会从半路开始；

过渡的局限性，理论上所有属性都支持，但是目前渐变背景属性（background-gradient）无法过渡，详见： http://www.w3.org/TR/css3-transitions/#properties-from-css-

在不同时间段内过渡不同属性

例：

#content a{

transition-property : border, color, text-shadow;

transition-duration : 2s, 3s, 8s;

}

缓动效果示例网站： http://cubic-bezier.com/

一个CSS技术网站： http://www.css-tricks.com/

调整窗口大小时，通配所有元素，让它们都执行过渡动画，

例：*{transition : all is;}

7.2 CSS3的2D变形

CSS3变形属性transform，包括2D和3D变形。

例：

nav ul li a{

display : block; /*针对Safari设置，不然没有效果*/

}

nav ul li a:hover {

transform : scale(1.7); /*放大到1.7倍*/

}

变形选项有：

scale 用来缩放元素（放大或缩小），例如：transform : scale(1.7); /*放大到1.7倍*/
translate 在屏幕上移动元素（上下左右四个方向），例如：transform : translate(40px 0px); /*表示从左到右移动40px，上下移动0px*/
rotate 按一定角度旋转元素（单位为度, deg），例如：transform : rotate(90deg); /*旋转90度*/
skew 沿X和Y轴对元素进行了斜切，例如：transform : skew(10deg, 2deg);
matrix 允许以像素精度来控制变形效果，例如：transform : matrix(1.678, -0.-51.533, 1.523, 2.333, -51.533, -1.989);

http://www.w3.org/TR/css3-2d-transforms/

一个变形效果生成器： http://www.useragentman.com/matrix/

transform-origin属性

表示定义变形的起点，默认是元素的中心点，例如：transform-origin : 20% 20%;

http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property

CSS3的3D变形（目前还不太成熟）

兼容情况：Webkit平台（Safari、Chrome）、Firefox 10+、Android v3和iOS（所有版本）都支持，IE10目前不支持。

http://www.w3.org/TR/css3-3d-transforms/

例：

</div>

</section>

.Qcontainer {

width : 28%;

position : relative;

-webkit-perspective : 200; /*透视角度，值越大视点和3D场景之间的景深就越大，如果要明显的3D效果就减小透视值，3D效果的立体程度，取决于3D场景和观察者之间的距离*/

float:left;

}

.film {

width : 100%;

-webkit-transform-style : preserve-3d; /*设置一个3D场景*/

-webkit-transition : 1s; /*过渡效果*/

}

.Qcontainer : hover .film {

-webkit-transform : rotateY(180deg); /*Y轴旋转180度*/

}

.face {

position : absolute; /*必须使用绝对定位，这样正面才能盖在背面的上面*/

-webkit-backface-visibility : hidden; /*隐藏背面*/

}

.front {

z-index : 5; /*降级支持其他非Webkit浏览器*/

}

.Qcontainer : hover .front {

z-index : 0;

}

.back {

width : 100%;

-webkit-transform : rotateY(180deg);

background :#3b3b3b;

background : -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);

padding : 15%;

}

7.4 CSS3动画效果

兼容支持情况：Firefox 5+、Chrome、Safari4+、Android（所有版本）、iOS（所有版本）均支持，IE10+。

CSS3动画由两部分组成：首先是关键帧声明，然后在动画属性中使用该关键帧声明。

/*定义多个关键帧*/

@-webkit-keyframes warning {

0% { /*开始也可以写成from*/

text-shadow : 0px 0px 4px #000;

}

50% {

text-shadow : 0px 0px 20px #000;

}

100% { /*结束也可以写成to*/

text-shadow : 0px 0px 4px #000;

}

/*使用关键帧*/

.box h5{

animation : warning 1.5s infinite ease-in; /*animation的缩写，值分别为要使用的关键帧名，播放次数（infinite表示连续循环播放），缓动函数*/

animation-name : warning;

animation-duration : 1.5s;

animation-timing-function : ease-in;

animation-iteration-count : infinite;

animation-play-state : running;

animation-delay : 0s;

animation-fill-mode : none;

}

一个在线生成CSS3动画效果的网站： http://www.andthewinnerisnt.com/

CSS3动画范例网站： http://webdesignerwall.com/trends/47-amazing-css3-animation-demos

http://www.w3.org/csswg/css3-animations/

第8章用HTML5和CSS3征服表单

placeholder 占位符文字属性

例：<input type="text" name="title" placeholder="请输入标题文字" />

required 将表单域设置为必须项

如果提交时未填写，浏览器会显示警告信息，警告信息的内容和显示方式取决于浏览器与输入框类型；另外range、color、button、hidden类型的输入元素不能使用required属性

例：<input type="text" name="title" required aria-required="true" placeholder="请输入标题文字" />

autofocus属性

表示让表单在加载完成时就有一个表单域被默认聚焦或选中，以便于用户输入；

注意：一个表单内只能有一个表单元素使用autofocus属性，否则会造成浏览器（交互）混乱;

例：<input type="text" name="title" placeholder="请输入标题文字" autofocus />

autocomplete 属性
表示开启或关闭表单或表单域的自动完成提示功能

例：

</form>

list及对应用datalist元素

它可以让用户在输入框中开始输入时，显示一组备选值（实现类似自动完成提示列表效果）

</select>

</datalist>

HTML5的新输入类型

主要作用是限制用户输入的数据，不需要引用额外的JS文件；当在那些不支持新特性的浏览器中，它们会被降级显示为一个标准的文本输入类型；

email类型

例：

number数值类型

例：

url类型

用于输入URL地址，当提交不合法的URL地址时，浏览器会显示警告信息。

例：

tel类型

用于输入电话号码（数字格式），目前很多浏览器未能在提交不合适号码揭示警告信息；

例：

search类型

用于显示一个搜索框，各浏览器的渲染搜索框的表现不同

例：

pattern属性

用于通过正则表达式来自定义表单域的数据格式，结合 required 使用时，在提交不合法数据时，浏览器会显示警告信息。

例：

color类型

用于生成一个颜色选择器控件，方便用户选择十六进制的颜色值，不过好多浏览器都不支持显示（Opera V11支持）。

例：

date/time/week/month日期和时间输入类型

用于生成一个日期和时间等输入控件，不过好多浏览器都不支持显示（Opera V11支持）。

例：

step属性
用来修改各种输入类型控制按钮的步增值

例：

range滑动条输入类型

例：

function showValue (value) {

document.getElementById("range-value").innerHTML = value;

}

</script>

参考资料

HTML5表单工作草案

http://dev.w3.org/html5/spec-auther-view/forms.html#forms

给不支持HTML新特性的浏览器打补丁

可以用利用JS插件Modernizr（ http://www.modernizr.com/）向HTML5/CSS3特性支持的浏览器打补丁

基于Modernizr和jQuery的Webshims Lib插件可以用于插入表单补丁，用于使不支持HTML5表单新特性的浏览器可以处理HTML5表单。

http://github.com/aFarkas/webshim/downloads

示例：

$.webshims.polyfill(); //加载补丁

</script>

针对表单的CSS3伪类选择器

input:required 选择必填表单域；
input:focus:invalid 选择当前聚焦的且含有非法输入值的表单域；
input:focus:valid 选择当前聚焦的且含有合法输入值的表单域；

第9章解决跨浏览器问题

9.1 渐进增强与优雅降级

它们是处理多浏览器支持的两种方法论；

优雅降级：它是指为现代浏览器制作网站，然后保证为某些老版本浏览器提供基本可用的体验，新特性在老版本浏览器中会降级，且一般会有一个分界点，声明不支持那些老掉牙的浏览器；

渐进增强：与优雅降级恰好相反，它是指以恪守Web标准的标签为基础，意味着它在所有浏览器中均可用，然后通过CSS样式和必要的Javascript来为更先进的浏览器提供渐进式的增强体验；

多版本IE测试工具IETester

http://www.my-debugbar.com/wiki/IETester/HomePage

类似的替代工具

http://www.mashingmagazine.com/2011/08/07/a-donzen-cross-browser-testing-tools/

9.3 前端的瑞士军刀：Modernizr

Modernizr是用于检测浏览器功能的开源Javascript库，主要功能有：

1、HTML5（元素）垫片：通过JS脚本创建相应的元素，让IE8及更低版本支持header、footer等新的HTML5元素；

2、HMTL5功能/特性检测：检测浏览器是否支持各种HTML5和CSS3特性；

3、媒体查询功能支持：给IE6/7/8追加min/max媒体查询功能；

4、按需加载资源文件功能：它能按需要加载相应的JS和CSS文件；

官方网站： http://modernizr.com/

它是如何检测和判断是否支持各种HTML5和CSS3特性呢？

即在<html class="history websockets……">标签上添加各种支持或不支持特性的类名，如果不支持的特性则加上no-的前缀；

这样我们就可以做两件事了：

1、在CSS文件中逐个特性地修正样式；

2、按需加载额外的CSS或JS文件；

例如：

让不支持3D变形特性的浏览器显示相应的备注信息

.note {display:none;}

.no-csstransforms3d .note{display:block;}

给IE6/7/8追加min/max媒体查询功能

类似的工具插件有Respond.js : http://githun.com/scottjehl/Respond

<![endif]-->

IE条件注释的参考资料：

http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx

使用Modernizr按需加载资源

使用示例：

Modernizr.load({

test : Modernizr.mq("only all"), //only all表示“你能识别媒体查询吗？”，即先执行测试，如果不支持，则执行nope方法，其他示例：Modernizr.mq("only screen and (max-width:600px)")

yep : 'js/pass.js', //检测成功时，执行yep，然后加载相应的文件

nope : ['js/respond.min.js', 'css/extra.css'], //数组格式：一次加载多个文件

both : 'js/for-all.js' //无论检测结果如何都执行both方法，然后加载文件

}, {

//另一个媒体查询，如果max-width等于600px时，则加载jquery

test : Modernizr.mq("only screen and (max-width:600px)"),

yep : ['js/jquery.min.js'],

complete : function () {

//资源完全加载后运行

}

});

</script>

参考文档：

http://modernizr.com/doc/#load

下载垫片脚本：

http://githun.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

必要时将导航链接转换为下拉菜单

http://css-tricks.com/convert-menu-to-dropdown/

https://github.com/mattkersley/Responsive-Menu

9.5 高分辨率设备

iPhone 4上第一款使用高分辨率的设备，屏幕大小为960X640像素，分辨率为每英寸326个像素。

为让图片在高分辨率设备上也尽可能的清晰，我们需要制作相应的图片，即图片尺寸是原来两倍

示例：

@media all and (-webkit-min-device-pixel-ratio : 1.5) {

#logo {background-image : url( ../images/logo@x2.png);}

}

weixin_33910460

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

响应式Web设计：HTML5和CSS3实战 读书笔记

响应式Web设计：HTML5和CSS3实战读书笔记