封尘网

让学习成为一种习惯!

又是一段没有更新博客的日子

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

虽然此处改版的地方不多如:匹配手机版,精简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%,字体也调整了,并把网页头部,底部和一些不需要的给隐藏了; 这样的方法就简单多了,虽然并不是最好的,但是在手机端上浏览时产生的效果就好看多了。

提醒:本文最后更新于 854 天前,文中所描述的信息可能已发生改变,请谨慎使用。