不用看统计数据都知道，近几年手机网站的浏览量比起桌面网站肯定是大幅度上升的。所以编写网站的手机版本，是一个很重要的工作。
手机网站的做法，主要有两种。
一种是让你桌面网站兼容手机，或者说倒过来，让你的手机网站兼容桌面。这样你的网站在桌面和在手机是共用 css 文件的，只是在不同的屏幕会使用不同的样式。我的博客之前也是这样做的，加上这样的样式供手机屏幕使用：
@media screen and (orientation: portrait)
{
body, input, textarea, select
{
font-size: 28px;
}
}
这个样式的意思是在竖屏的时候，把字号显示为 28px。其实 css 样式是不区分你使用的是不是手机的，当你在桌面调整你的浏览器尺寸，使它的宽高比是一个竖屏的时候，也会使用这个样式。同理，当手机横屏使用的时候，不会使用这个样式。这样的话，还需要添加一个横屏的样式：
@media screen and
(orientation: landscape) and
(max-device-width: 960px)
{
body, input, textarea, select
{
font-size: 28px;
}
}
这个样式的意思是在横屏，同时屏幕的最大宽度不超过 960px 的时候，也使用 28px 的字号。之所以要添加最大宽度的限制，是因为桌面浏览器本来就是横屏，但是桌面屏幕较宽，都会超过 960px，所以以 960px 为界，区分桌面横屏和手机横屏。
这种让桌面网站和手机网站互相兼容的方法，优点是编写简单。缺点是限制了桌面网站和手机网站必须要呈现同样的内容，这样在大屏幕的桌面上，页面就会有大量的留白。所以这样的做法适合内容少的博客。
内容多的门户网站和社交网站，会用另外一种做法，就是编写专门的手机站。比如站点：yourdomain.com 会编写一个手机站点：m.yourdomain.com。这样手机网站就是可以呈现和桌面网站不同的内容。一般是桌面网站呈现完整的内容，而手机网站呈现简化的内容。
由于桌面和手机访问的是不同的页面，可以加载不同的 css 文件，所以不必去编写那些兼容的样式了。
但是这样带来了一个新的问题，就是用户复制了你的桌面链接，然后发送到手机，或者反过来，复制了手机链接，然后发送到桌面，这样你的网站就显示了错误的页面。所以这种做法都要做一个桌面访问或手机访问的判断，可以在客户端用 javascript 判断，设置 location.href 属性去访问对应的页面，也可以在服务器端判断，向客户端发送 302 重定向去访问对应的页面。最近我对自己的博客做了修改，采用的就是在服务器端判断的方法。
这种做法需要在设计上想清楚，你的桌面网站和手机网站的链接映射规则是什么，如果不是故意忽略的话，每一个桌面网站的链接都能找到对应的手机网站链接，反之亦然。