[读书笔记]响应式web设计
致谢
Ethan Marcotte 响应式网页设计之父
《义海倾情》1 RWD，Responsive Web Design
- 伊桑.马科特 AList Apart
- 弹性网格布局，弹性图片，媒体和媒体查询
- 不再使用像素px，而是使用相对度量单位em或百分比
- 视口调试工具 Microsoft Iternet Explorer Developer Toolbar ，Safari RaiseMe，Resizer，Firefox Firesizer，Chrome Windows Resizer
- 网站 http://thinkvitamin.com http://2011.dconstruct.org
- 响应式设计创意收集网站 http://mediaquery.es
- html5新增语义化标签元素: header nav
- css3 http://www.csszengarden.com
- 圆角 border-radius
- 渐变 linear-gradient(yellow，blue)
- http://www.panic.com/blog/
- http://demo.macrofolio.net/3d_animation_css3
- http://designlovr.com/examples/dynamic_stack_of_index_cards/
2 媒体查询，支持不同的视口
- 语法:
}
- 可以将多个表达式组合在一起，用and连接
<link rel="style sheet" media="screen and (orientation : portrait) and (max-width:800px), projection" href="800wide-portrait-screen.css" /> - 可以写一个媒体查询列表，用逗号分隔，其中一个为真，就加载样式表。
- 还可以在样式表里面使用媒体查询:
h1 { color:green}
}
- 还可以使用css的@import指令在当前样式表中按条件引入其它样式表:
- 可供媒体查询检测的特性:
height 视口高度
device-width 设备屏幕的宽度
device-height 设备屏幕的高度
orientation 横向还是纵向状态
aspect-ratio 视口的宽高比，如16/9
device-aspect-ratio 屏幕的宽高比
color 每种颜色的位数，如16
color-index 设备颜色索引表中的颜色数，必须是非负整数
momochrome 单色缓冲区中每像素所使用的位数，必须是非负整数，如2
resolution 分辨率，如 300dpi 118dpcm
scan 电视扫描方式，progressive 逐行 interlace 隔行
grid 检测输出设备是网格设备还是位图设备
上述除了scan和grid之外都可以使用min和max来创建一个查询范围
- 为ie8及更低版本加入媒体查询的工具:Respond.js
- 重置样式:用来覆盖不同浏览器渲染HTML元素时的各种默认样式。
- 怎样阻止移动设备浏览器自动调整页面大小:基于Webkit核心的浏览器大多支持用viewport meta 元素覆盖默认的画布缩放设置，只需要在<head>标签中插入一个<meta>标签，其中可以设置具体的宽度或者缩放比例，下面是将页面方大到实际尺寸两倍显示的meta标签实例:
maximum-scale 最多放大倍数
minimum-scale 最少放大倍数
user-scalable=no 禁止缩放
- css正在引入能实现同样功能的@viewport 声明
3 拥抱流式布局
- 使用百分比布局创建流动的弹性界面，同时使用媒体查询来限制元素的变动范围。
- 将网页从固定布局转换成百分比布局
目标元素宽度÷上下文元素宽度=百分比元素宽度
- 将文字大小从像素尺寸修改为相对单位em，实现文字缩放。
font-size:100%;
fobt-size:16px;
font-size:1em;
- 百分比计算公式也适用于将文字的像素单位转换为相对单位em。
- 行高一般相对与元素本身的文字大小，而不是父元素的文字大小。
- em作为一种测量单位，指的是特定字母的宽度和高度相对于特定字体磅值的比例。
- 让图片随视口缩放
为防止弹性图片随视口拉大超出其原始尺寸，需要为其设置阈值，使用max-width，此条也适用于整个页面，防止其无限制扩张。
- 为不同的屏幕尺寸提供不同的图片
Matt Wilcox 的"自适应图片"√
实现自适应图片需要Web服务器编程的辅助，准备Apache 2、PHP 5.x和GD库。
- css网格系统
- 常用网格类名:
4 响应式设计中的Html5
- 腻子脚本(polyfill)
具体指一段能给老版本浏览器带来新特性的Javascript代码，它会给你的代码里追加多余的代码。
- 轻量级增强脚本能让老版本IE支持新的HTML元素 Remy Sharp
- Modernizer 除了能让IE支持html5新元素以外，还能基于一系列新特性测试来有条件的加载更高级的腻子脚本，css文件，以及额外的js文件。
- html5样板文件: http://html5boilerplate.com
<html lang="zh">
<meta charset=utf-8>
- 暂保留和非保留的html废弃零件
- html5的全新语义化元素:
<nav>元素用来定义文档的主导航区域
<article>用来包裹独立的内容片段
<aside>元素用来表示与页面主内容松散相关的内容，经常可用做侧边栏，另外，引文、广告以及导航元素也可以使用它
<hgroup>:如果页面中有一组使用<h1>、<h2>、<h3>等标签的比标题、标语和副标题，则可以考虑使用<hgroup>将他们包裹起来。
- html5的大纲结构算法:
http://hoyois.github.com/html5liner/
<header>元素不计入大纲结构，所以不能用它来划分内容结构，而是应该用他来包含对区域内容的介绍说明。
<footer>页脚，博客文脚
<address>用来标注离其最近的<article>或<body>祖先元素的联系信息。
- html5中的文本级语义元素:
- 遵循WAI-ARIA无障碍网页应用技术实现无障碍站点，让残障人士也能无障碍的访问网页上的动态内容。
ARIA地标角色属性role:
application，banner，conplementary，contentinfo，form，main，navigation，search
使用非可视桌面阅读器(NVDA)测试网站可访问性:http://www.nvda-project.org/
为使用了无障碍技术的元素设置样式: nav[role="navigation"]{···}
- 嵌入视频:<video src="myVideo"></video>
- 音频用audio标签
- 对于使用了iframe嵌入视频，要进行响应式设计，可以使用插件，如jQuery的FitVids
- 实现离线Web应用:
http://diveintohtml5.com
- CSS3:选择器，字体和颜色模式
当前浏览器对特定CSS3和html5特性的支持程度: http://caniuse.com
最近全球浏览器使用率统计: http://gs.statcounter.com
- 多栏布局 column-width，column-count，column-gap，column-rule
- 文字换行 word-wrap
- css3属性选择器
- 子字符串匹配属性选择器:
匹配包含内容选择器 Element[attribute*="value"]
匹配结尾选择器 Element[attribute$="value"]
- CSS3结构伪类
- table布局属性
display:table-row
display:table-cell
- nth-child选择器 nav ul li:nth-child(even) a{···}
nth-child(n)
nth-last-child(n) 从文档末尾开始算
nth-of-type(n)
nth-last-of-type(n)
odd
even
- 否定选择器:not
- 对伪元素的修正:css3
p::first-line
p::first-letter
- 字体格式 eot ttf svg woff
字体资源站点 www.google.com/webfonts www.fontsquirrel.com www.typekit.com www.fontdeck.com
始终为应用了@font-face字体的标题元素设定font-weight属性，以防止字体模糊
6 用CSS3创造令人惊艳的美
- prefix私有前缀自动为css3规则追加浏览器私有前缀。
- 文字阴影
第一个值右侧阴影大小，第二个值下方阴影大小，第三个值模糊距离，第四个值颜色
使用负值可以制作出左上方阴影效果
删除第三个值可以去掉模糊效果
浮雕: text-shadow: 0 1px 0 hsla(0， 0%， 100%， 0.75);
用逗号分隔的多组值就可以制作出多重的文字阴影。
- 盒阴影：和文字阴影用法一样
- 内阴影:
- 背景渐变
90deg:表示沿着90度垂直方向，也可以使用to top right这样的值
径向的 background: radial-gradient(center， ecllise cover，#ffffff 72%，#dddddd 100%);
渐变形状:circle，ellipse
渐变大小:closet-side，closet-corner，fathest-side，fathest-corner，cover，contain
在线渐变生成器: http://www.colorzilla.com/gradient-edit/
重复的 background: repeating-linear-gradient(90deg，#ffffff 0px，hsla(0，1%，50%，0.1) 5px);
背景渐变图案 http://lea.verou.me/css3patterns/
- 使用css预处理器轻松编写css3代码 ：SASS，LESS
- 多重背景图片
url('../img/1.png')，
url('../img/2.png')，
url('../img/3.png') left bottom ，black;
- 背景图片大小
预定义值:auto， cover，contain
- 背景图片位置
- @font-face图标 ：将图标制作成字体，再使用@font-face引入
7 css3 过渡、变形和动画
- 如何使用过渡声明:
注意，过渡声明要放在过渡效果开始的元素上
- 过渡相关的属性
transition-duration 定义过渡效果持续的时间，单位为s
transition-timing-function 定义过渡期间速度如何变化，ease linear ease-in ease-out ease-in-out cubic-bezier
transition-delay 可选，用于定义过渡开始前的延迟时间
注意，有些属性无法实现过渡。
- 在不同的时间段内过渡不同的属性
........;
transition-property: border, color,text-shadow;
transition-duration:2s,3s,8s;
}
理解过渡调速函数，其实都是某种贝塞尔曲线，本质上就是缓动函数 ： http://cubic-bezier.com/
- 响应式网站的有趣过渡 http://css-stricks.com/
transition:all 1s;
}
- 2D变形 transform
transform: scale(1.7);
}
鼠标悬停时，放大到原始大小的1.7倍
如果在safari中应用此效果，需要给原始元素设置display:block;
- 我们能做哪些变形
translate 移动
rotate 按一定角度旋转，单位deg
skew 沿x轴和y轴斜切，输入两个角度值
matrix 允许你按像素精度控制变形效果，它能让你将若干变形效果组合成单个声明
transform:matrix(1.678，-0.256，1.525，2.333，-51.533，-1.989);
- 傻瓜式的矩阵变形工具 http://www.useragentman.com/matrix/
- 使用transform-origin属性来修改变形效果的起点:
transform-origin:20% 20%
- 3D变形
将transform-style设置为preserve-3d
添加翻转效果: transform:rotateY(180deg);
翻转后隐藏背面的内容: backface-visibility:hidden;
注意使用绝对定位来造成覆盖
对于不支持该效果的浏览器，使用降级方案，设置z-index值
- css3动画效果
声明部分:
@keyframes warning {
0% {
text-shadow:…;
}
50% {
…
}
100% {
…
}
}
除了使用百分比，也可以使用from和to来定义开始和结束帧
使用部分: animation: warning 1.5s infinite ease-in;
也可以一个个单独列出来:
animation-name: warning;
animation-duration:1.5s;
animation-time-function:ease-in-out;
animation-iteration-count:infinite;
animation-play-state:running;
animation-delay:0s;
animation-fill-mode:none;
http://webdesignerwall.com/
8 html5表单
- 首先表单被设定一个ID用于对应样式，然后包含一个html5的hgroup，用于表单标题和文字说明。
- 表单中的子区域都使用带有legend标签的fieldset来包裹。
- 每一个输入元素都有一个label元素与之对应，且一并包含在div中。
- required是一个布尔类型的属性，表明该表单域为必填项，如果提交时没有输入该项信息，则浏览器会显示警告信息，警告信息的显示方式取决于浏览器与输入框的类型。
- 为方便屏幕阅读用户，可以为输入框追加WAI-ARIA属性:aria-required="true"。
- range，color，button，hidden类型的输入元素都不能使用required，因为它们几乎都有默认值。
- autofocus 属性可以让表单加载完成时就有一个表单域被默认聚焦(或选中)，以便于用户输入。
- autocomplete可以设置禁用(off)或开启(on)自动完成功能。
- list属性及其对应的datalist元素可以让用户在输入框中开始输入时，显示一组备选项。
- html5的新输入类型
在不支持这些新特性的浏览器中，会被降级显示为一个标准的文本输入框。
type="email"
type="number" min max
type="url"
type="tel"
type="search"
pattern="[一个正则表达式]"
type="color"
- 日期和时间输入类型
type="month"
type="week"
type="time"
type="datetime" 或 "datetime-local" 省略了时区信息。还可设置步增值 step="14000"。
- type="range" min max ，使用该类型目前可以使用js来显示当前值:onchange="showValue(this.value)"。
- 如何给不支持新特性的浏览器打补丁
Webshim Lib http://afarkas.github.com/webshim/demos/
- 使用css3美化html5表单
- 针对表单的css3伪类选择器
input:focus:invalid
input:focus:valid
9 解决跨浏览器问题
- http://www.andthewinnerisnt.com
- 渐进增强与优雅降级
渐进增强:恪守Web标准的标签，在此基础上通过css样式和js来为更先进的浏览器提供渐进式的增强。
- Opera和Aaron Gustafson
- 可以使用html5验证工具来排除错误代码:
http://validator.w3.org
- IE Tester
- 给IE678追加min/max媒体查询功能
- 放置在IE条件注释中的垫片脚本，使其只针对IE特定版本加载:
<script src="js/response.min.js"/></script>
<![endif]-->
- 使用Modernizr按需加载资源
- 必要时将导航链接转换为下拉菜单
Responsive Menu http://github.com/mattkersley/Responsive-Menu
- 应对高分辨率设备的未来趋势
原作作者博客：
http://www.benfrain.com/