sass重構響應式unofficial‘s部落格輕鬆適應移動端

標籤：style   blog   http   color   使用   os   io   strong   

前言：

　　剛剛玩部落格園幾天時間，發現挺不錯的，對於我這個懶人又是一個愛折騰的人來說挺不錯的，對於上班玩電腦，下班玩手機的使用者來說，部落格園中我的部落格有一點給我的感覺不是很友好，電腦端看起來很美觀的一個頁面，移動端竟然也是原模原樣的“美觀”，由於工作主要是從事移動端開發，看著部落格可以禁用模板樣式，於是乎就決定把部落格樣式重構一下，分享是一種美德，不喜勿噴。本文原創部落格地址：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)