响应式web设计 html5+css3实战
下面是我自己看此书整理出的一些精华部分和自己不知道的，大家有兴趣的话可以去看此书，此书强烈推荐，对于制作响应式页面流程非常清晰！
1. 不能迷恋px了，大多数情况下使用em或百分比
2. 媒体查询非常重要！（不改变页面内容的情况下，为特定的输出设备定制显示效果）
（1），ios上的safari浏览器默认是在980px宽的页面上渲染页面。然后将画布缩小到与视口大小匹配。阻止此默认事件。可用meta viewport
（2）媒体查询是对css2.1的一个增强，可以增加多个判断条件等。
（3）拥抱流式布局，用%
Px与%之间的换算公司一定要牢记：目标元素宽度/上下文元素宽度 = 百分比宽度，应用此公式一定要注意上下文宽度，否则页面会显示乱的！
（4）用em替换px
目标元素尺寸/上下文元素尺寸 = 百分比尺寸
牢记：现代浏览器的默认大小都是16px；
（5）弹性图片，让图片随视口缩放
设置图片的max-width:’’;切记：想让图片自适应，标签里的宽度和高度必须放弃。
可以为指定图片设置规则。
图片不能无限制的放大，用该设置一个最大的宽度用px值。
窗口也不可能无限制的放大，外层元素的宽度也要设置最大值。
（6）想要设置自适应的图片
上面网站介绍了使用方法，不过此方法需要web端的服务器编程。
3. html5样板文件 http://html5boilerplate.com/时间紧迫，但需要一个好的项目起点。则强烈推荐使用
4. link标签 script标签 可以不必写type属性
5. 伟大的a标签：a标签中可以嵌入多个元素，可以一同嵌入h2,p,img等等。
6. Html5标签：
（1） 一个页面可以有多个header标签，footer标签，nav标签article标签中也可以存在头部和尾部，如博文。
（2） Hgroup标签 可以包裹一组使用h1,h2,h3,等标签的标题
符合html5的大纲结构算法可以使用下面html5大纲生成器测试生成网页的大钢结构
http://gsnedders.html5.org/outliner/
7. html5文本级语义元素
<b>:纯粹为了吸引人的注意：如文档摘要中的关键词和评论中的产品名称等！
<em>：强调内容中的重点
<i>.：一小段不同语态或语气的文字，标明其不同的特点。
此外还有大量的文本级语义标签，查看更多可以看如下地址：
http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#text-level-semantics
8. 遵循wai-aria的无障碍站点：
想要全面了解：可以查看：http://www.w3.org/WAI/intro/aria.php
我们可以用其中部分容易实施的技术，将其应用到html5的网站中。
地标角色role=”navigation”等此属性有很多值
若你是在windows平台上开发切向使用屏幕阅读器测试网站的可访问性可以免费使用NVDA 软件的官方地址如下：
http://www.nvda-project.org/releaseDownload/2012.3.1/nvda_2012.3.1.exe
为使用无障碍技术的元素设置样式，可以直接使用属性选择器来为其设置样式：
Nav[role=”navigation”] 这样可以为导航区域设置样式
9. 在html5中嵌入媒体：
Video和audio标签标签可以附加一些属性：width 和 height 默认的播放控制栏controls循环播放loop 控制媒体预加载preload定义视频缩略图：poster
现在这些标签不同浏览器支持播放的视频格式都不同，为了兼容，引入了source标签引入不同的文件格式为了兼容低版本 引入object标签 等
10. 响应式视频
去掉video标签中width和height属性，该用样式文件里控制
video{max-width:100%；height:auto}
此方法不适合使用iframe嵌入的视频的响应问题，解决此问题引入了一个jquery插件：
名为：FitVids 下载地址如下：http://fitvidsjs.com/ 更多详细信息请看：
http://daverupert.com/2011/09/responsive-video-embeds-with-fitvids/
11. 离线web应用：
用户在离线的情况下也可以访问网页
使用离线访问很简单，只需要在要离线访问的页面的 html标签中添加mainfest属性：值最好是.Mainfest的后缀名。
.Mainfest后缀的文件里的内容有固定的格式，可参考100页查看！
此文件里罗列了该网页离线使用时所需的所有资源文件（包括html css javascript ）
其中版本号一定要添加，更新版本。
一但离线发生故障，一般最好用chrome 控制台去查看，非常方便。
里面罗列了所有离线缓存的文件。早console控制台下面
一般问题的原因都是因为mainfest文件路径不正确引起的。
完整规范：
http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline
css3 章节
1. 快速编辑css3的的前缀的javascript解决方案
http://leaverou.github.com/prefixfree/
2. 当前浏览器对html5和css3的特性的支持程度。
全球浏览器使用统计率
3. Css3 多栏布局：
-webkit-column-width: 12em;
-webkit-column-count:4;
-webkit-column-gap:2em;
-webkit-column-rule:thin dotted #999;
4. 文字换行：
url换行：word-wrap：break-word；
4. Html5 id命名可以是数字开头的
5. Css3 对伪元素的修正
Css2中p:first-line会选中p标签的第一行内容，p:first-letter会选中其中的第一个字母，
Css3则要求使用两个：：来区分伪类与伪元素
::first-line 对于响应式设计来说 会根据视口自动变化（为元素：：）
6. @font-face
网站上有好多免费字体：
打开 http://www.fontsquirrel.com/
单击view
单击红框
单击download 蓝色按钮即可下载所有字体格式的demo。
使用@font-face 引用字体，有时候会出现字体模糊，原因是浏览器会为标题元素应用标准的font-weight（一般是700），所以我们应该手动写上font-weight：400；
以后引用任何字体最好都设置font-weight属性。
在响应式设计中：使用@font-face一定要注意字体文件的大小。
7. Css3 RGBA和 HSLA
Opacity透明与rgba和hsla的区别
Opacity 设置的透明会对整个元素发生影响，即内部也透明
而使用另外两种可以让元素的某些部分透明，内部而不透明。
8．想要浮雕文字效果，诀窍是；不要模糊，不要水平阴影，仅在垂直方向设置1到两像素的白影即可。
9 渐变：线性渐变 背景渐变
该网站是渐变生成器网站，功能很多很强大。这里可以选择颜色，过渡点，渐变风格，甚至可以选择颜色空间（hex，rgba，hsl）等还有很多功能（149）
http://www.colorzilla.com/gradient-editor/
一些现成的背景渐变图案整理，代码已经写好了
http://lea.verou.me/css3patterns/
10 使用css预处理器轻松编写css3代码
Less 和 SASS
12. Css3 过渡transition
Transition：all 1s ease 0s;
过渡的简写语法中声明中的第一个时间永远是过渡效果持续的时间，第二个时间永远是定义过渡开始前的延时时间。
过渡也 可以在不同时间段内过渡不同属性。
如：a{
Transition-property：border,color, text-shadow;
Transition-duration:2s,3s, 8s;
}
响应式网站中的 有趣过渡：
* {
Transition：all 0.5s;
}
13. Css3变形 transform 2D变形 和 3D变形
2D变形: 给a标签设置transform 在sasari下有个bug，要想实现效果，a标签必须是display：block；
http://www.useragentman.com/matrix/
傻瓜式的矩阵变形工具：此网站可以让你精确的将元素拖拽成你想要的样子并且代码自动生成。
在变形的同时我们可以更换中心点，transform-origin属性。
3D变形：书中效果自己没有写出来，愚笨了！
突发奇想：以后如果为了兼容浏览器，在代码中必须做出明确表明并记录文档，为以后统一的标准修改代码也方便。
扫一扫
777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
