分享个人博客皮肤【兼容移动端】_html/css

我真正开始写博客也有一年了，记得最开始写博客之前做的第一件事就是自定义皮肤样式，还为此写过一篇博文《博客园页面设置》。当然从现在的我看那个时候的我是那么的菜，也许一年之后看现在的我也会同样的想法（其实这样也挺好的，证明自己进步了）。为什么要自定义皮肤样式？当然是为了编写出来的博文让人更有阅读欲，自己看着也舒服。很多时候没有一个好的皮肤样式也会成为我们不写博文的一个借口《我们为什么应该坚持写博客》。

其实，很多时候我是很懒的。不是实在看不下去了一般我也不会去动原来的样式。早就有写这篇博文的冲动，因为懒一直拖到现在。现在大冷天的周末躺在被子里面实在不想起床，拿着手机逛着博客园。可惜的是阅读体验非常的不好（我并没有装客户端）,有的甚至无法阅读。实在是受不了，今天决定编写此文，大家有空都让自己的博客兼容移动端吧。其实，我想很多园友并不是不会，也只是因为懒才没有兼容（分分钟的事，为了你的读者。）。本文最主要的目的就是想发动大家都来使用自定义样式来兼容移动端，顺便把自己一些其他自定义也分享了。

一、兼容移动端（img自动滚动条）

兼容移动端，其实非常简单，要做的事情也不多。在《一步步开发自己的博客 .NET版剧终篇（6、响应式布局和自定义样式）》文中我已经分析过了，今天再次分析下吧。

在head中增加一个meta

使用过bootstrap的同学都知道，必须在head标签内加上（参数1：设置屏幕宽度为设备宽度，参数2：缩放值为1。这样做是为了防止根据不同屏幕的像素密度对你的页面进行缩放），然我们博客园并没有默认加上这个meta。所以，我们只能通过javascript动态加上去了。

$("head").prepend("<meta name='viewport' content='width=device-width, initial-scale=1'>");

Copy after login

在css中加一个移动端的media

/*在屏幕宽度小于992px的时候（假设是移动端）*/@media (max-width: 992px) {     /*           这里定义的样式只有在屏幕下于992px的时候才会起作用           可以在这里定义，在移动端应该要设置的样式。     */}

Copy after login

样式中设置大图或固定宽度容器可以左右滚动

在移动端显示最大的问题应该就是屏幕太小，导致有些内容不能完全显示吧。我们可以让其左右滚动。

* {    overflow: auto;/*溢出内容自动滚动*/    word-wrap: hyphenate;}

Copy after login

直接暴力决绝，任何元素只要溢出都让自动滚动。

如此简单的两步就实现了移动端的兼容，容易吧。所以，同志们都来兼容移动端吧。我们开始吧：

1.首先在我的后台页面 http://i.cnblogs.com/Configure.aspx

2.javascript部分的代码

$("head").prepend("<meta name='viewport' content='width=device-width, initial-scale=1'>");

3.css部分的代码

/*移动端*/@media (max-width: 992px) {    .footer {        margin-right: 5px;    }    .divyoulian, #footer {        margin-right: 5px;        padding-bottom: 5px;    }    #mymainContent {        margin: 8px;    }    #mainContent {        margin-right: 5px;        margin-left: 5px;    }    .forFlow {        margin: 0px;    }    /*#sideBar, #header {        display: none;    }*/    #sideBar, #div_digg {        position: initial;    }    * {        overflow: auto;        word-wrap: hyphenate;    }    #sideBar li {        text-indent: initial;    }    /*#cnblogs_post_body p, #cnblogs_post_body li {        font-size: 33px;    }*/    .myadd_left {        display: none;    }    .myadd_right {        float: none;        width: 100%;    }        .myadd_right div {            line-height: 50px;        }    .myadd {        margin: 0px;    }    /*.myadd_right div a {                font-size: 10px;            }*/}View Code

Copy after login

效果图：

二、历史评论记录移动效果

效果图：

1. http://i.cnblogs.com/Preferences.aspx 中

尽量选多点显示的评论量。

2.固定最新评论的区域大小，并让其溢出内容隐藏。

#RecentCommentsBlock {    max-height: 400px;    overflow: hidden;}

Copy after login

3.用javascript动态改变滚动条位置。

//移动一个单位 评论function nextRecTop() {    var rec = $("#RecentCommentsBlock");    if (rec.length) {        var top = rec.scrollTop();        top++;        rec.scrollTop(top);        if (top != rec.scrollTop())            rec.scrollTop(0);    }}//移动评论function MobileComment() {    var RecCommentTime = 30;//间隔时间    var RecintervalId = setInterval(function () {        nextRecTop();    }, RecCommentTime);    //鼠标移动时    $("#RecentCommentsBlock").hover(function () {//移进        clearInterval(RecintervalId);    }, function () {//移出        RecintervalId = setInterval(function () {            nextRecTop();        }, RecCommentTime);    });}

Copy after login

三、评论区域

1.显示头像

很多人问我头像怎么出来的，其实你知道仔细观察过就会发现默认已经加载了图像，只是没显示出来而已。以dudu的博文评论为例：

然后我们在利用javascript动态组装就可以了。

2.评论区“温馨提示”

其实这只是一张图片而已，在textarea取的焦点时隐藏背景图片。

1.设置类样式（背景图）

.tbCommentBody_bg {    background: url('http://images2015.cnblogs.com/blog/208266/201510/208266-20151018182003319-279061587.png') no-repeat;}

Copy after login

2.javascript添加类

function focusoutCommentBody_bg() {    $("#tbCommentBody").focusout(function () { addtbCommentBody_bg(); });}//添加评论区 背景function addtbCommentBody_bg() {    var tbcomment = $("#tbCommentBody");    if (!tbcomment.hasClass("tbCommentBody_bg")) {        tbcomment.addClass("tbCommentBody_bg");        tbcomment.focus(function () {            removetbCommentBody_bg();        });    }}//移除评论区 背景function removetbCommentBody_bg() {    !$(".tbCommentBody_bg").removeClass("tbCommentBody_bg");    $("#tbCommentBody").unbind("focus");}

Copy after login

四、标签搜索

日积月累，如果我们写的博文过多不方便查找时，可以搜索标签。

1.通过读取页面 http://www.cnblogs.com/zhaopei/tag 的所有标签存在隐藏域。

//读取 标签function gettag() {    $.ajax({        type: "get",        dataType: 'html',        url: "http://www.cnblogs.com/zhaopei/tag",        data: {},        beforeSend: function (XMLHttpRequest) {//当一个Ajax请求开始时触发。        },        complete: function (jqXHR, status, responseText) {//请求完成时触发这个事件        },        success: function (data) {            //设置宽度一致            $(".select_list_tag").css("width", $(".text_select_tag").css("width"));            $(".hidden_tag").val("");            var a = $(data).find("#MyTag1_dtTagList td a");            var span = $(data).find("#MyTag1_dtTagList td span.small");            for (var i = 0; i < a.length; i++) {                               $(".hidden_tag").append(a[i].innerHTML + "&");            }            //yuntagF();            get_list_tag();        },        error: function (msg) {        }    });}

Copy after login

2.添加到Html5中的自动补传控件

用法（例）：

<input list="pasta"><datalist id="pasta"><option>Bavette</option><option>Cannelloni</option>.......</datalist>

Copy after login

我们还可以使用必应站内搜索： http://cn.bing.com/search?q=js+site:cnblogs.com/zhaopei 把最后的zhaopei修改成你自己的博客id就可以了。

还有一些自定义的东西这里就不一一分析了，只要自己想要的效果多试试自然可以慢慢搞定的。如：页首推荐文章三篇、自动加载阅读目录、弹出框和执行代码区域框。

这里给出我的样式代码下载。

注意：

1.我是在下面皮肤基础上修改的。你如果要使用我的样式，先选择这个默认皮肤。

2.请不要试图引用新的jqeruy进去，否则你的博客会有你想不到的问题。（因为博客园里面有基于Jquery的插件）。

（当然，你也可以在评论区分享你的自定义样式。）

分享个人博客皮肤【兼容移动端】_html/css_WEB-ITnose

一、兼容移动端（img自动滚动条）

二、历史评论记录移动效果

三、评论区域

1.显示头像

2.评论区“温馨提示”

四、标签搜索

注意：