之前一直没时间开发博客的手机网站，最近也花了一点时间学CSS3自适应相关文章，所以准备开发博客的手机自适应版本，花了半天时间将博客改了一下。期间也碰到了许多的问题，所以将这个手机博客的自适应开发过程写下来。

在PC上和手机上打开www.songker.com的效果不一样，可以用Chrome PC版的F12体验下各个手机下的网站显示。

我首先在首页添加了一个style样式文件，样式文件的路径http://songker.com/zb_users/theme/Songker/style/mobile.css。

大致的改写是，在手机浏览器下，将PC网站上多余的模块隐藏。如右侧的热门标签，热门文章等模块和顶部的LOGO和搜索框等直接隐藏，将左侧的文章列表宽度扩展到100%，顶部添加一个菜单按钮，点击时候展示网站的分类等...

PC网站还是手机网站应用不同的样式，可以用CSS3的@media特性来区分。

CSS3 Media Queries的简单用法：

max-width

.class的样式会在可视区域的宽度小于 600px 的时候被应用。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

或者链接一个单独的样式表，可以用下面这种写法：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css" />

mix-width

下面的样式会在可视区域的宽度大于 900px 的时候被应用。

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

混合使用

在可视区域的宽度在 600px 和 900px 之间的时候被应用

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #666;
  }
}

我刚开始的写法为：

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="mobile.css" />

这种在Android高分辨率上某些浏览器下会出现问题（说的就是你UC浏览器），会依旧识别为PC网站。

改写方法：

<link rel="stylesheet" media="only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5)" href="mobile.css" />

上面代码的意思是，在设备像素比大于1的时候显示为手机网站（PC浏览器的device-pixel-ratio都是为1）。