前言：
刚刚玩博客园几天时间，发现挺不错的，对于我这个懒人又是一个爱折腾的人来说挺不错的，对于上班玩电脑，下班玩手机的用户来说，博客园中我的博客有一点给我的感觉不是很友好，电脑端看起来很美观的一个页面，移动端竟然也是原模原样的“美观”，由于工作主要是从事移动端开发，看着博客可以禁用模板样式，于是乎就决定把博客样式重构一下，分享是一种美德，不喜勿喷。本文原创博客地址：http://www.cnblogs.com/unofficial官网地址：www.pushself.com)
准备工作：
编辑工具：notepad++,sublime text
样式工具：sass
开启自动编译sass文件
方法参考一：前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件
方法参考二：ruby环境下安装sass，sass --watch命令，方法一中也有说到，详细的资料可以百度一下，阮一峰老师的教程就挺不错的额。
思路一：
不禁用模板默认css，直接在此处重构css样式，或者上传样式文件直接引用，这种方式比较偷懒，只是局部修改就要的了
思路二：
禁用模板默认css，完全重新来过，爱折腾的懒人我是选择的上传css样式文件直接引用
注：文件上传地址是文件--文件上传，文件的路径是http://files.cnblogs.com/用户名/文件名.css
开始工作：
1.分析模板布局|（脑图来源于脑图工具）
2.新建sass文件后，直接引入相应的mixin代码块，方便我们快速编写简化的css代码
可以参考大漠的10个常用mixin代码块，还在不断更新中，由于代码块使用的是@include 包含入样式，这样不能达到简化css样式代码，于是乎我们可以使用一个小的技巧，例如我们需要响应式断点，我们可以直接使用%breakPoint，在它的里面包含代码块，再@extend继承%breakPoint，如此一来你的代码就变得简化了很多，这个断点由于文中就一个看不出效果，通常我们在网页布局中最离不开的一个东西就是浮动，浮动这个东西挺有趣的，听过张鑫旭老师讲过一篇关于浮动的课程，他对于浮动这块的讲解易懂，他的声音太销魂了，让人久久难以忘怀。
有以下HTML代码嵌套div：
<div id="navigator">
<div id="navList"></div>
<div class="blogStats"></div>
</div>
有以下SASS代码：
%clearfix:after{
content:" ";
height:0;
display:block;
visibility:hidden;
clear:both;
}
#navigator {
@extend %clearfix;
}
//css3多前缀自动生成 @mixin css3($property, $value) { @each $prefix in -webkit-, -moz-, -ms-, -o-, ‘‘ { #{$prefix}#{$property}: $value; } } //响应式断点 @mixin breakPoint($point) { @if $point == large { @media (min-width: 64.375em) { @content; } } @else if $point == medium { @media (min-width: 50em) { @content; } } @else if $point == small { @media (min-width: 37.5em) { @content; } } }
3.宽度不能固定宽度
在main环节我们可以发现这样mainContent与sideBar有最小宽度，这样以来设备尺寸小的时候不能在容器内装下，就会出现溢出，添加了一个滚动，移动设备上就需要左右拖动才能显示完全，这一点很重要，通过百分比来设计宽度，media控制显示，移动设备屏幕较小的时候的可以选择sideBar置于文章底部或者隐藏掉，看个人喜好。
4.添加meta标签
移动端设备添加一个响应式宽度viewport标签，content的内容是，width=device-width：宽度等于设备宽度；initial-scale=1：初始化比例大小为1；maximum-scale=1：最大比例大小为1；minimum-scale=1：最小比例大小为1；user-scalable=no：是否允许手动调节大小
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
待更新结语：
由于时间关系暂时还没有完全更新我的样式文件，后续更新文件后就可以实现相应的效果了，第一次正儿八经的写详细的技术文章，希望可以待在首页与大家多多交流，互相学习。本文原创博客地址：http://www.cnblogs.com/unofficial官网地址：www.pushself.com)