首页 > 代码库 > sass重构响应式unofficial‘s博客轻松适应移动端

sass重构响应式unofficial‘s博客轻松适应移动端

前言:

  刚刚玩博客园几天时间,发现挺不错的,对于我这个懒人又是一个爱折腾的人来说挺不错的,对于上班玩电脑,下班玩手机的用户来说,博客园中我的博客有一点给我的感觉不是很友好,电脑端看起来很美观的一个页面,移动端竟然也是原模原样的“美观”,由于工作主要是从事移动端开发,看着博客可以禁用模板样式,于是乎就决定把博客样式重构一下,分享是一种美德,不喜勿喷。本文原创博客地址: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)