1.css3@media规则
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
列：如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
margin: 0px; padding: 0px; color: rgb(170, 17, 17); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px;">lightblue;
}
}
你也可以针对不同的媒体使用不同 stylesheets :
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
2.HTML5响应式（自适应）网页设计
指可以自动识别屏幕宽度、并做出相应调整的网页设计
1、允许网页宽度自动调整 在网页代码的头部，加入一行viewport元标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
1）width=device-width ：表示宽度是设备屏幕的宽度
2）initial-scale=1.0：表示初始的缩放比例，1.0就是占网页的100%
3）minimum-scale=1.0：表示最小的缩放比例
4）maximum-scale=1.0：表示最大的缩放比例
5）user-scalable=no：表示用户是否可以调整缩放比例
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>
2、不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，CSS代码不能指定像素宽度：width:xxx px;只能指定百分比宽度：width: xx%;或者width:auto;
3、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。body {font: normal 100% Helvetica, Arial, sans-serif;}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。h1 {font-size: 1.5em;}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。small {font-size: 0.875em;}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
4、流动布局（fluid grid）
“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main {float: right;width: 70%;}.leftBar {float: left;width: 25%;}
5、选择加载CSS
自适应网页设计”的核心，就是CSS3引入的Media Query模块。自动探测屏幕宽度，然后加载相应的CSS文件。
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)"href="smallScreen.css" />
6、图片的自适应（fluid image）
除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。
这只要一行CSS代码：img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：img { -ms-interpolation-mode: bicubic; }
3.null instanceof Object
instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
object(参数) instanceof constructor（要检测的对象）
alert(typeof(null)); //object alert(null instanceof Object); //false
这是由Javascript规范规定的，Null和Object都是javascript中的数据类型。
Null数据类型只有一个值：null。就像undefined数据类型只有一个值：undefined。
问题出在typeof操作符的定义规范，如下
11.4.3 The typeof Operator The production UnaryExpression : typeof UnaryExpression is evaluated as follows:
1. Evaluate UnaryExpression.
2. If Type(Result(1)) is not Reference, go to step 4.
3. If GetBase(Result(1)) is null, return "undefined".
4. Call GetValue(Result(1)).
5. Return a string determined by Type(Result(4)) according to the following table: Type Result
Undefined "undefined"
Null "object"
Boolean "boolean"
Number "number"
String "string"
Object (native and doesn’t implement [[Call]]) "object"
Object (native and implements [[Call]])
"function" Object (host) Implementation-dependent
可以看到，对于Null类型的值（只有null），规范就是定义返回”object”这个字符串。但是本质上Null和Object不是一个数据类型，null值并不是以Object为原型创建出来的。所以null instanceof Object是false。但从这里也可以看到，null确实是javascript中用来表示空引用的 一个特殊值。使得它不是instanceof Ojbect，而typeof null是“object”。在语义上也是可以理解的。
1 instanceof Number //false
var a = new Number(1);
a instanceof Number // true
instanceof判断一个对象是否是另一个对象的实例，而数字1是基本数据类型，不是对象，
var a = new Number(1)；是通过包装类Number把数字1转换成对象，你可以用typeof a，和typeof 1，看看他们返回的值
原始类型 使用instanceof 都返回false 而第一个是使用Number把1包装成了对象
4.类型转换
var aa = function(){return true},
bb = function(){return false};
(function(){
if( (aa() && [])==![] ){
aa = function(){
return false
}；
function bb(){return true}
}
})();
console.log("aa"+aa());
console.log("bb"+bb());
alert( [] == ![] )//true
[] == ![]
[] == !true // ! 操作符的优先级高于 == ，所以先执行 ! 操作
[] == false // !true 得到的是 false
[] == 0 //比较规则1：如果值为true或false，则转成1或0来继续比较
[] == 0 //执行左侧的 [] 的 valueOf 方法，而 [] 是对象，所以 [].valueOf() 返回本身 []
"" == 0 //执行左侧的 [] 的 toString 方法，[].toString() 返回 ""
0 == 0 //比较规则2：如果一个值是数字，一个值是字符串，则把字符串转换为数字，再进行比较，"" 转成数字是 0。
- 如果其中一个值是true，则将其转换为1再进行比较。如果其中一个值是false，则将其转换为0再进行比较。
- 如果一个值是对象，另一个值是数字或字符串，则将对象转换为原始值再进行比较。对象通过toString()方法或valueOf()方法转换为原始值。JavaScript语言核心的内置类首先尝试使用valueOf()，在尝试使用toString()，除了日期类，日期类只使用toString()方法，那些不是JavaScript语言核心中的对象则通过各自实现中定义的方法转换为原始值。
有了以上两条作为基础，我们再来看问题。
控制台指出等号右边为布尔值，由第一条可知，它将转换为数字0，也就是数字类型。
！的优先级较==高，先运算==左侧的操作数：[]是对象，会转换成true，然后再转成false（加！的一定是转换成boolean）
== 的左操作数是[]，数组（对象处了日期对象，都是对象到数字的转换），碰到==要先调用自己的valueOf()方法=>[]（还是本身），然后调用自己的toString()方法=>空字符串=>false (或者空字符串转成0，然后再转成false，但是终归会是false)
false==false
执行类型转换的规则如下：
如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。
如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。
如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。
如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。
在比较时，该运算符还遵守下列规则：
值 null 和 undefined 相等。
在检查相等性时，不能把 null 和 undefined 转换成其他值。
如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。
如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。
