【读书笔记】响应式Web设计 html5和css3实战

第一章 HTML5、CSS3及响应时设计入门

第二章 媒体查询、；支持不同视口

　　看完第一章，感觉还是有很多没接触过得知识的，或者说有豁然开朗的感觉，所以要细细品读每一章。
　　媒体查询语法：
　　　　@media screen and(max-width:960){
　　　　　　body{background-color:yellow;}
};
　　　　 在css2中通过link中的media属性定义；
　　　　<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="screen-style.css">
　　　　还可以使用CSS2的@import引入样式表：
　　　　　　@import url("phone.css") screen and(max-width:360px);
　　　　但使用@import方式会增加http请求，影响加载速度；

　　　　媒体可查询特性：width;height;device-width;device-height;aspect-ratio; 详情见书本p26

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

　　　　ios和android浏览器都基于webkit核心，支持viewportmeta元素覆盖默认画布缩放设置：
　　　　<meta name="viewport" content="width=device-width,initial-scale=2.0,user-scalable=no " />initial-scale=2.0表示页面放大2倍，maximum-scale=3,页面最多放大3倍

第三章 拥抱流式布局

　　将页面从固定布局修改为百分比布局目标元素宽度*上下文元素宽度=百分比宽度　
　　用em替换px　目标元素尺寸*上下文元素尺寸=百分比尺寸
　　让图片随视口缩放 max-width:45%或者width:28.9398281%;max-width:202px;
　　为不同的屏幕尺寸提供不同的图片：使用Adaptive Images解决方案需求apache 2、PHP5.X和GD库，就是需要web服务器编程；详情见p62
　　css网格系统：详情见p67，Columnal（http://www.columnal.com）

第四章，响应式设计中的html5

　　1、腻子脚本：意指使用腻子来补平老板本浏览器的缺陷；具体指的是一段能给老版本浏览器带来新特性的javascript代码。腻子脚本如：Modernizr(http://www.modernizr.com).
　　2、html5样板文件：http://html5boilerplate.com/
　　3、lang属性用来指定页面元素内容和元素属性值的主语言，如<html lang="en">
　　4、<a>标签在html5中可以嵌入多个元素，在html4中为了通过验证，必须为每个元素单独使用标签包裹；
　　5、<section>，使用它目的不是为了美化样式，如果想将某个元素包裹起来以便设置样式，那应该和以前一样继续使用div
　　6、<article>用来包裹独立的内容片断。当搭建一个页面时，想想你准备放入<article>标签内容能否作为一个整块而被复制粘贴到另一个完全不同的网站而且能保存完整意思。
　　7、<hgroup>包起各种标题，只有第一个标题元素进入文档大纲；
　　8、<address>用来明确地标注离其最近的<article>或者<body>祖先元素的联系信息，一般不放具体邮政地址；
　　9、遵循WAI-ARIA实现无障碍站点（无障碍网页应用技术）：主要解决残障人士能无障碍地访问网页上的动态内容。详情见p91
　　10、html5中嵌入媒体：<video></video><audio></audio>
　　11、响应式视频FitVids的JQery小插件：<script src="js/fitvids.js"></script>

　　　　　　<script>

　　　　　　　　$(document).ready(function(){
　　　　　　　　　　$("#content").fitVids();

　　　　　　</script>
　　12离线Web应用：详情见P99

第五章 css3：选择器、字体和颜色模式

  • 可快速编辑CSS3前缀的代码片段和javascript方案：“-prefix-free” http://leaverou.github.com/prefixfree/自动为CSS3规则追加浏览器私有前缀
  • 了解当前浏览器支持特定css3和html5特性的支持程度 http://caniuse.com/
  • 文字换行，word-wrap:break-word 老版本IE支持，项目中很少用，被遗忘了- -
  • 属性选择器 img[alt];Element[attribute^="value"];Element[attribute*="value"];Element[attribute$="value"];
  • html5中的ID值可以用数字开头；
  • CSS3结构伪类：:last-child;nth-child;nth-child(n);nth-last-child(n);nth-of-type(n)以及nth-last-of-type(n)；not
  • CSS3的计数方式和JQuery不太一样；JQuery计数从0开始，CSS3中计数从1开始；
  • 自定义网页字体：@font-face规则嵌入网页字体，Font Squirrel的字体都是免费的,始终为@font-face字体的标题元素设定font-weight属性以解决模糊
  • CSS3颜色格式和透明度；RGB颜色，HSL颜色;color:hsl(359,99%,40%),第一个表色相，第二个是饱和度，第三个是亮度；赤橙黄绿青蓝紫
  • 透明通道：HSL和RGB与十六进制颜色值最大的区别是它们支持透明通道；background-color:hsla(0,0%,100%,0.8);background-color:rgba(255,255,255,0.8)

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

  • 文字阴影 .element{text-shadow:1px 1px 1px #ccc}阴影值速记法规则永远是先向右再向下，第一个值指右侧阴影的大小，第二个值指的是下方阴影的大小，第三个值指的是模糊距离（即阴影从开始变淡到完全消失的距离），最后一个值是阴影颜色。
  • text-shadow:4px 4px 0 #404442;text-shadow:4px 4px 0px hsla(140,3%,26%,0.4);text-shadow:-4px -4px 0px #dad7d7;
  • 制作浮雕文字阴影效果：text-shadow:0 1px 0 hsla(0,0%,100%,0.75);不要模糊，不要水平阴影，仅在垂直方向设置1或2像素的“白影”即可。多重文字阴影：text-shadow:0px 1px #fff,4px 4px 0px #dad7d7;
  • 盒阴影:box-shadow:0px 3px 5px #444;
  • 内阴影：box-shadow:inset 0 0 40px #000;
posted @ 2012-12-24 17:28  61xing  阅读(571)  评论(0)  编辑  收藏  举报