最近都在为博客的改版伤脑筋，由于之前的代码都是直接模仿别人的来修改，这样改起来相对麻烦；谁叫我不是搞前端的。

虽然此处改版的地方不多如：匹配手机版，精简CSS代码和网页上的代码，目的一切从简。

不过在此次改版中确实学到了一点东西；至少知道了一些简单的终端样式匹配问题，这里简单记录一下；

1、网页源码

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />

1-2行大概意思：禁止移动端转码的 no-transform 跟 no-siteapp取消百度siteapp自动转码；

第三行就是最重要的，必须添加上，不然移动设备上就无法匹配；详情可以参考下这篇文章：

http://www.cnblogs.com/2050/p/3877280.html

2、就是CSS上添加一段配置屏幕大小来适配的CSS代码，意思就是说当屏幕小于多少时就调用这些代码；

/*当屏幕小于640px时匹配以下的css样式*/
@media(max-width:640px) {
    /* 网页全屏显示 */
    body {
        width: 100%;
    }
    /* 正文全屏显示 */
    .content-wrap {
        width: 100%;
        float: none;
        margin-left:0;
    }
    .article-title {
        font-size:12px;
    }
    .list-inline {
        font-size:12px;
    }
    .article-content p {
        font-size: 14px;
    }
    .article-content img {
        width: 85%;
        height: auto;
        border-radius:0;
    }
    .relates h4 {
        font-size: 14px;
    }
    .list-inline .home {
        display:inline;
        margin: 0 0.1em;
        padding: 0.3em 1em;
        font-size: 80%;
        background: #8156a7;
    }

    /*以下为隐藏的部分,根据div的class标签匹配*/
    .header {
        display: none;
    }
    .footer {
        display: none;
    }
    .datetime {
        display: none;
    }
    .totop {
        display: none;
    }
    }

这里没有明确的要求，我直接在手机上把文章页里的图片大小调整为85%，字体也调整了，并把网页头部，底部和一些不需要的给隐藏了； 这样的方法就简单多了，虽然并不是最好的，但是在手机端上浏览时产生的效果就好看多了。