有个名字叫随便乱记——css3

一、CSS3自适应
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />

对应的CSS代码：

@media (min-device-width:600px){
img[data-src-600px]{
  content: attr(data-src-600px,url);
  }
}
@media (min-device-width:800px){
  img[data-src-800px] {
  content:attr(data-src-800px,url);
  }
}

media-queries.js(http://code.google.com/p/css3-mediaqueries-js/)      

 respond.js(https://github.com/scottjehl/Respond)

 <!—[if lt IE9]>
      <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
 ​<![endif]>

1.1024px显屏
@media screen and (max-width : 1024px) {                    
/* 样式写在这里 */          
}     
2.800px显屏
@media screen and (max-width : 800px) {              
/* 样式写在这里 */          
}     
3.640px显屏
@media screen and (max-width : 640px) {              
/* 样式写在这*/            
}     
4.iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) {              
/* 样式写在这 */            
}     
5.iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) {         
/* 样式写在这 */            
}     
6.iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {              
/* 样式写在这 */            
}     
现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下：
@media (max-width: 480px) { ... }              
@media (max-width: 768px) { ... }              
@media (min-width: 768px) and (max-width: 980px) { ... }      
 @media (min-width: 1200px) { .. }

 

<link rel="stylesheet" type="text/css" href="http://www.zhangxinxu.com/study/css/demo.css" media="all" />
<link rel="stylesheet" type="text/css" href="normalScreen.css" media="screen and (max-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="widthScreen.css" media="screen and (min-width: 1024px)" />

<script>
if (!window.screenX) {
    //IE6~8
    var oStyle = document.createElement("link");
    oStyle.rel = "stylesheet";
    oStyle.type = "text/css";
    if (screen.width > 1024) {
        oStyle.href = "widthScreen.css";	
    } else {
        oStyle.href = "normalScreen.css";	
    }
    document.getElementsByTagName("head")[0].appendChild(oStyle);
}
</script>