所有主流浏览器都支持这个设置，包括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]–> DOM属性 (1).dom的宽度都是用%宽度 (2).字体使用相对大小（em或者rem），最后有em和rem的区别 (3).流动布局。各个区块的位置都是浮动的，不是固定不变的。 .main {float: right;width: 70%;} .leftBar {float: left;width: 25%;} float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。 选择加载CSS <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="a.css" /> 如果屏幕宽度小于400像素（max-device-width: 400px），就加载 a.css 文件 <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="b.css" /> 如果屏幕宽度在400像素到600像素之间，则加载 b.css 文件。 CSS的@media规则 <style> @media only screen and (min-width: 1200px) {} 页面大于1200时的样式 @media only screen and (min-width: 768px) and (max-width: 991px) {} 平板时的样式 @media only screen and (max-width: 767px) {} 手机时的样式 和 Mobile Menu @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {} 高清屏的样式 </style> 图片的自适应 除了使用css代码： img { max-width: 100%;} windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令： img { -ms-interpolation-mode: bicubic; }还可以根据不同大小的屏幕，加载不同分辨率的图片 6. em和rem em相对于父元素，rem相对于根元素。
em
<div> 我是父元素div <p> 我是子元素p <span>我是孙元素span</span> </p> </div> <style> div { font-size: 40px; width: 10em; /* 400px */ height: 10em; border: solid 1px black; } p { font-size: 0.5em; /* 20px */ width: 10em; /* 200px */ height: 10em; border: solid 1px red; } span { font-size: 0.5em; width: 10em; height: 10em; border: solid 1px blue; display: block; } </style>如果实在Google，因为默认最小字体是12px，所以span的字体是12px,宽度是120px。
rem
<div> 我是父元素div <p> 我是子元素p <span>我是孙元素span</span> </p> </div> <style> html { font-size: 10px; } div { font-size: 4rem; /* 40px */ width: 30rem; /* 300px */ height: 30rem; border: solid 1px black; } p { font-size: 2rem; /* 20px */ width: 15rem; height: 15rem; border: solid 1px red; } span { font-size: 1.5rem;/* 15px */ width: 10rem; height: 10rem; border: solid 1px blue; display: block; } </style>一般常用： 像素（px）：用于元素的边框或定位。 em/rem：用于做响应式页面，建议使用rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。
