UX Magazine.com是2006年度首届css大赛的冠军网站，呵呵既然是冠军网站肯定有他自己的特点
和得到冠军的法宝，其中一个就是采用了宽平和窄屏的两种不同显示模式，在屏幕>1024的时候采用
三列，当屏幕<1024的时候采用两列，而且设计的巧妙在于如果你不仔细观察根本发现不了它细节
上的变化，可以说利用了巧妙的css技巧让，让宽平和窄屏幕的用户都可以很好的浏览网站内容。

那么下面我们就来分析分析他是怎么做的，先来看看首页的源代码。（非常的整洁和干净）
先看头部找到关键部分：

  1. ............
  2. <link rel="stylesheet" href="http://www.uxmag.com/_css/uxm.base.css" type="text/css" media="screen" />
  3. <link rel="stylesheet" href="http://www.uxmag.com/_css/uxm.1024.css" type="text/css" media="screen" id="wide" title="wide" />
  4. <link rel="alternate stylesheet" href="http://www.uxmag.com/_css/uxm.800.css" type="text/css" media="screen" id="narrow" title="narrow" />
  5. <link rel="stylesheet" href="http://www.uxmag.com/_css/uxm.print.css" type="text/css" media="print" />
  6.  ................
  7.  <!-- h5 & h6 Image Replacement Script  -->
  8. <script src="http://www.uxmag.com/_js/imageReplace.js" type="text/javascript"></script>
  9. <!-- Generic Scripts / Functions -->
  10. <script src="http://www.uxmag.com/_js/jsLib.js" type="text/javascript"></script>
  11.         ......................
  12. <!-- Various functions that initialize the page. -->
  13. <script type="text/javascript">
  14. <!--
  15.    function doOnResize () {
  16. determineStyle();
  17. }
  18.    function doOnLoad () {
  19.      determineStyle();
  20.    if ( getCookie("externalLinks") ) {
  21.        setLinkAttributes( getCookie("externalLinks") );
  22. }
  23. }
  24.             window.onresize = doOnResize;
  25. window.onload = doOnLoad;
  27. //-->
  28. </script>
  29.        .......................

从上面的代码可以看出，整个页面引用了四个主要css：
1.uxm.base.css是整个页面的基础样式;

2.uxm.1024.css是>1024分辨率的样式;
3.uxm.800.css是<1024分辨率下的样式;
4.uxm.print.css是打印样式;

三个javascript脚本：
1.imageReplace.js负责替换图片的
2.jsLib.js站点的综合脚本库
3.是一个引用的函数doOnResize ()，doOnLoad ()很明显可以看出
分别是在页面改变大小的时候和读取的时候改变执行determineStyle()
函数来改变页面的css。
我们打开uxm.1024.css和uxm.800.css
对比一下面代码

uxm.1024.css

  1. #container {
  2. margin-left: auto;
  3. margin-right: auto;
  4. width: 1005px;
  5. background-color: #fff;}   
  6.  
  7.          #magic-1024 {
  8. background-color: #fff;
  9. float: left;
  10. height: 750px;
  11. width: 250px;}
  12.  
  13. #magic-800 {
  14. visibility: hidden;
  15. display: none; }

uxm.800.css

  1. #container {
  2.     margin-left: auto;
  3.     margin-right: auto;
  4.     width: 755px;
  5.     background-color: #fff;}
  6.       
  7. #magic-1024 {
  8.     visibility: hidden;
  9.     display: none; }
  10. #magic-800 {
  11.     background-color: #fff;
  12.     float: left;
  13.     height: 250px;
  14.     width: 750px; }

发现 #magic-1024 和 #magic-800 代码中有 visibility: hidden; 属性，在去首页里查找有一个magic-1024，magic-800再看里面包含的东西都是一样的，只不过一个是放在左边一个是放在右边，这个时候应该明白了，也就是说当屏幕的宽度大于1024的时候javascript读取uxm.1024.css在改变整个页面容器宽度的同时，隐藏掉下面的部分，当屏幕的宽度小于1024的时候那么javascript读取uxm.800.css在改变容器大小的同时隐藏掉右边的部分。
破解UX Magazine的自适应屏幕的三列和两列_01

好了首页分析完了，我们再看看次级页面，发现内容页面也是可以三列和两列进行转换的，我们打开源代码搜索一下，并没有
发现magic-800和magic-1024奇怪了没有，我们再看看源代码是否引用了新的js和css，发现也没有，再仔细观察页面发现
是从Recent Comments这个栏目开始变化的，好我们查看代码发现从Recent Comments栏目开始往下采用的是一个div,id为gamma,Recent Comments
上面是采用的一个div，id为beta,我们再来看看这两个id在css中的属性：

  1. #beta {
  2.         float: left;
  3.         width: 245px;
  4.         margin: 0px;
  5.         padding: 0px;
  6.         display: block;
  7.         }
  8.  
  9. #gamma {
  10.          width: 245px;
  11.          float: left;
  12.          margin: 0px;
  13.          background-color: #ffffff;
  14.          display: block;}

发现#beta和#gamma都是有float:left属性，也就是说#gamma这个区域本来是应该在#beta区域的右边，我们再看uxm.1024.css和uxm.800.css
uxm.1024.css

  1. #container {
  2.            margin-left: auto;
  3.            margin-right: auto;
  4.            width: 1005px;
  5.            background-color: #fff;}

uxm.800.css

  1. #container {
  2.           margin-left: auto;
  3.           margin-right: auto;
  4.           width: 755px;
  5.           background-color: #fff;
  6. }

两个容器的宽度一个是width: 1005px;一个是width: 755px;这下就清楚了，是利用div容器和float的特性，当总体容器宽度
正常的时候，#gamma靠在#beta 的右边，而当总体容器宽度缩小的时候，就把#gamma挤到了#beta下面。

总结整个网站为了根据浏览器大小自适应两列和三列内容采用了两种方法：
1.用javascript根据屏幕大小读取相应的css,css改变容器大小同时隐藏和显示相应的层；
2.用javascript根据屏幕大小读取相应的css,css改变容器大小积压层变化位置；

破解UX Magazine的自适应屏幕的三列和两列_02