[笔记]html5+css3 响应式设计(RWD,Responsive Web Design)

[笔记]html5+css3 响应式设计(RWD,Responsive Web Design)[概述+媒体查询]
书名：<Web设计：HTML5和CSS3实战>
一 概述
1. 为了能够使「一个页面,支持各种客户端屏幕分辨率大小[pc,mobile,pad]」成为可能，Ethan Marcotte提出了响应式网页设计。
将3种已有的开发技巧【弹性网格布局，弹性图片，媒体和媒体查询】整合后，命名为【响应式网页设计(流式设计，弹性布局，塑料布局，流体设计，自适应布局，跨设备设计，弹性设计)】
2. 一句话概括：针对【任意设备】对【网页内容】进行【完美布局】的一种显示机制。
3. html5语义标签和css3字体，动画，变换等功能，给RWD提供了更多可能性
4. 不再迷恋 【像素px】,使用相对度量单位【em或百分比】
5. 视口（ViewPort）：页面实际显示区域
屏幕尺寸：设备物理显示区域
6. 【响应式网站】无法替代真正的【移动网站】

二 媒体查询
根据设备显示器特性【视口宽度，屏幕比例，设备方向】设定css样式
1. 使用
1-1) css文件：
@media screen and （max-width: 960px）{
body{
background-color: red;
}
}
1-2) <link>标签：
<link rel="stylesheet" type="text/css" media="screen" href="xxx.css">
<link rel="stylesheet" type="text/css" media="screen and ( orientation: portrait) and (min-width: 800px), projection" href="xxx.css">
纵向的宽度大于800px的屏幕或投影仪的时候，加载xxx.css
1-3) css文件里的import
@import url("xxx.css") screen and (max-width:360px); 会增加http请求，影响加载速度

2 可检测特性
width[视口宽度],height[视口高度],device-width[屏幕宽度],device-height[屏幕高度],orientation[屏幕纵横],aspect-ratio[视口宽高比16：9=16/9],device-aspect-ratio[屏幕宽高比],color[xx位色min-color: 16],color-index[设备颜色数，非负数],monochrome[单色缓冲区每个像素使用位数],resolution[屏幕或打印机分辨率min-resolution:300dpi,118dpcm每厘米像素点],scan[电视机扫描progressive[逐行扫描，720p电视],interlace[隔行扫描1080iHD电视]],grid[设备是网格还是位图]
除orientation,scan和grid外，其他可以用min和max设定范围

3 阻止移动浏览器自动调整页面大小
viewport meta元素
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
缩放2倍，其他属性[maximum-scale,minimum-scale,user-scalable=no]

三 使用技巧
1 通过覆盖式样来响应不同的设备[先普通设备的css，后面才是用响应特殊设备的css覆盖前面的式样]
2 如果将不同媒体查询样式放于不同css文件，会导致http请求太多，页面加载变慢。
3 Respond.js[https://github.com/scottjehl/Respond ]用于兼容ie8等低版本支持媒体查询的js工具。但目前无法解析 @import 命令

----
[笔记]html5+css3 响应式设计(RWD,Responsive Web Design)[流动布局+弹性图片]

一. 【流式布局】
为了兼容未来可能出现的设备，为了是媒体查询断点之间的显示效果平滑流畅，需要灵活的【流动布局】
百分比布局方法王者归来...
【百分比布局】创建流动的弹性界面
【媒体查询】限制元素的变动范围
此二者构成【响应式设计】的核心

1. 元素的【固定像素宽度】转【百分比宽度】公式
目标元素宽度 / 上下文元素宽度 = 百分比宽度

2. 文字的用【em】替换【px】
公式【目标元素宽度 / 上下文元素宽度 = 百分比宽度】同样适用
上下文文字元素默认大小为16px
48px / 16px = 3em
【关键】是分清上下文元素
【注】行高的【上下文元素】是其本身的文字大小

二. 【弹性图片】
1. 图片缩放
删除img的宽度和高度后，使用【img,object,video,embed{max-width(或width属性): 100%;}】
【max-width】还可以用于限制图片或元素的最大px或最大百分比
【注】此法对于iframe内元素无效

2. 为不同尺寸提供不同图片
书中使用js插件
http://adaptive-images.com
如果是css可以设置的图片，可以通过【媒体查询】

3. CSS网格系统
响应式设计css框架
Semantic
Skeleton
Less Framework
1140 CSS Grid
Columnal 作者推荐[使用960.gs框架(固定宽度网格系统)类似的CSS命名]

使用网格系统可以快速搭建网站
----

[笔记]html5+css3 响应式设计(RWD,Responsive Web Design)[HTML5+CSS3]

一 html5

1. html5兼容问题
可以使用html5样板文件
http://html5boilerplate.com
包含了normalize.css,polyfill，Modernizr等

2. 关于html W3School里有很详细的教程可以参考
主要特性：
语义化标签
多媒体，video，audio
离线存储 .manifest
画板canvas

3. 提到【无障碍网页应用技术】

4. video 响应式方法
tab中去除width,height属性
css中加入max-width:100%;height:auto;
对于iframe的视频，使用jquery插件FitVids

二 CSS3
CSS3可以实现各种效果：
圆角，背景渐变，文字阴影，盒阴影，自定义字体，多重背景图片，动画，平移，2/3D旋转等等
具体可以从W3CSchool里查询

但对旧版本浏览器的兼容性还存在很多问题，可以使用js进行一定程度的弥补

技巧：可快速编辑css3私有前缀[-webkit,-ms等]
js工具：-prefix-free

常用css3响应式设计

1. CSS3多栏布局
column-width: 12em;
column-count: 4;
column-gap: 2em;
column-rule: thin dotted #999;

2. CSS3长文字换行[url地址等无空格内容]
word-wrap: break-word;

3. CSS3选择器[字符串匹配属性选择器,有点像正则表达式，与jquery选择器也差不多]
以特定前缀开头；
Element[attribute^="value"]{}
包含特定字符串；
Element[attribute*="value"]{}
以特定后缀结尾；
Element[attribute$="value"]{}
也可以直接用等于
Element[attribute="value"]{}

4. CSS3结构伪类
css2：
li:first-child
css3:
li:last-child

nth-child选择器原来处理交替样式
：nth-child(even) 或者 odd表示奇偶
还有
:nth-child(n),:nth-last-child(n),:nth-of-type(n),:nth-last-of-type(n)
n:整数[2]，表达式nth-child(3n+1),nth-last-child(-n+3)(-n:表方向)
【注】CSS3计数从1开始

否定(:not)选择器
nav ul li:not(.internal) a{...}

css3伪元素修正
css2:
p:first-line
p:first-letter
css3:
p::first-line
p::first-letter

5. 自定义网页字体
@font-face
字体格式：EOT/TTF/WOFF
例：
@font-face{
font-family: 'xxxx111';
src: url('xxx/xxx.eot');
src: url('xxx/xxx.eot?#iefix') format('embedded-opentype'),
url('xxx.woff') format('woff'),
url('xxx.ttf') format('truetype'),
url('xxx.svg#xxx') format('svg');
font-weight: normal;
font-style: normal;
}
在需要的地方使用该font-face定义的font-family名字：xxxx111
font-family: 'xxxx111';
【注】如果字体模糊，需要覆盖浏览器默认的font-weight:700属性，改为400左右
【缺点】字体文件太大

6. CSS3颜色格式和透明度

.RGB颜色
color: rgb(red,green,blue);

.HSL颜色
HSL(色相，饱和度，亮度)
color: hls(359,99%,50%);
【注】最好给IE6,7,8留下16进制备用颜色
color: #fe0208;
color: hls(359,99%,50%);

.透明通道
hsl和rgb支持透明通道
background-colro: hsla(0,0%,100%,0.8);
background-colro: rgba(255,255,255,0.8);
【注】
opacity 会对整个元素造成透明
透明通道 只会对元素部分造成透明

7. 文字阴影，盒阴影，渐变，多重背景
text-shadow[可以用逗号，实现多重阴影]
box-shadow[内阴影(inset);可以用逗号，实现多重阴影]
linear-gradient(90deg, #fff 0%, #e4e4e4 50%, #fff 100%)
径向背景渐变
linear-gradient(center,ellipse cover, #fff 72%, #ddd 100%)
重复渐变
repeating-linear-gradient(...)
还可以用于background背景图片
多个背景图片，背景图片大小[background-size]，位置等

W3CSchool里有更为详细内容，此处没有多大意义

8. 可缩放图标
@font-face图标
即：字体图片放于精灵图片中，通过font-face进行识别调用
由于使用的是字体，所以可以缩放
http://fico.lensco.be/

9. CSS3过度，变形，动画
CSS3的教程，不该出现在这个【响应式设计】里呀
W3CSchool里有更为详细内容，此处没有多大意义

下面过度语句似乎会比较好玩
*{
transition: all 1s;
}
----

[笔记]html5+css3 响应式设计(RWD,Responsive Web Design)[HTML5+CSS3 表单]

没有什么大的东西，就是在说html5的表单新特性。
如：【自动完成功能】，【表单控件检查】，【新控件类型】，【正则表达式检查】，【新属性】等
然后就是对于旧浏览器的 兼容脚本【Webshims Lib】，【Modernizr】等
最后是使用CSS3美化html5表单

不过有一点需要注意的，这些html5表单，在不同设备上的显示方法是不同的，本身就自带了一定程度的【响应式设计】

1. css3对于html5表单的伪类选择器
input:required 必填域
input:focus:invalid 当前聚焦且含非法输入域
input:focus:valid 当前聚焦且含合法输入域

----

[笔记]html5+css3 响应式设计(RWD,Responsive Web Design)[最后一章：跨浏览器问题]

1. 【渐进增强】与【优雅降级】
【优雅降级】：为了旧浏览器，主动去除不支持的新特性
【渐进增强】：为先进的浏览器提供新特性支持

2. 前端的瑞士军刀【Modernizr】
下面书中例举了【Modernizr】的用处和用法
辅助修正式样
兼容html5标签
支持媒体查询
按需加载资源
等等。
差不多就结束了

关键总结：
响应式设计三大要素：【媒体查询】，【流式布局】，【弹性图片】
锦上添花：Html5，CSS3