[CSS樣式語法]隨螢幕大小變動寬度的新版CSS樣式探討

http://blog.xuite.net/jeanson61/xuite/28439946-%5BCSS%E6%A8%A3%E5%BC%8F%E8%AA%9E%E6%B3%95%5D%E9%9A%A8%E8%9E%A2%E5%B9%95%E5%A4%A7%E5%B0%8F%E8%AE%8A%E5%8B%95%E5%AF%AC%E5%BA%A6%E7%9A%84%E6%96%B0%E7%89%88CSS%E6%A8%A3%E5%BC%8F%E6%8E%A2%E8%A8%8E

嗯!!玩了幾天的新版Xuite Blog樣式，原本以為大概就只能用固定的欄位寬度了吧！不過不死心，要想想有沒有辦法像Xuite舊版的版型一樣可以隨螢幕大小而改變寬度的作法，因為 還是有很多人喜歡大一點(寬一點)的畫面啊(像我的畫面都是設定寬1280以上)！所以我想到用百分比率的方式來設定欄位(中間欄與側邊欄)的寬度，這樣 就可以做到欄位寬度可以隨著瀏覽器寬度而改變的樣式。
在前面的這篇文章http://blog.xuite.net/jeanson61/xuite/28235538， 我寫道說要將container, linksLeft, linksRight, 與mid這些區塊設定寬度是因為新版的Xuite Blog樣式是先顯示mid中間欄，而在Xuite舊版的Blog樣式是先顯示左右側欄。為什麼這樣的改變會造成無法像舊版的樣式那般讓中間文章顯示區塊 隨著瀏覽器的寬度而變寬？我直覺得想就是舊版的CSS中，container欄是隨著瀏覽器寬度而改變寬度，中間欄是不定義寬度的，它是兩邊側欄用剩的就 是它的大小！可以看一下舊版的語法↓
/*定位框*/
#container {
    position:relative;
    text-align: left;     
    behavior:expression(this.style.width =  (document.documentElement.offsetWidth<990)?"990px":"100%");
    min-width:990px;
    padding:0px 0px 0px 0px;
    margin:0px auto;
}
/*左欄*/
#linksLeft{
    position:absolute;
    left:0px;
    width: 205px;
    margin: 5px;
}
/*右欄*/
#linksRight{
    position:absolute;
    right:0px;
    width: 205px;    margin: 5px;
}

/*中間欄*/
#mid{
    position:relative;
    margin:0px 215px 0px 215px;
    padding: 10px 5px 5px 5px;
}
在舊版語法中，container的寬度是變動的：behavior:expression(this.style.width =  (document.documentElement.offsetWidth<990)?"990px":"100%");這一段就是指說寬度最小是990px; 若是大於990px就以該寬度為寬度。
至於左欄與右欄則是固定寬度width: 205px;，一個靠左放left:0px;，一個靠右放right:0px;。
最後顯示的是中間欄的部份，它則是不設寬度，它設定的是與左右各留215px的距離margin:0px 215px 0px 215px;，所以mid的寬度也是跟container大小變動的！
然後我說當新版的Xuite部落格是先顯示中間欄時，如果要透過
position:relative;以及margin:0px 215px 0px 215px;去限定它的寬度大小根本就不可能!!所以當時直覺就是以為一定要為中間欄設定寬度才有辦法達到!!
當然現在我找到的辦法其實都還算是有設定中間欄的寬度!!只是我不是用固定數值的寬度，是改採用百分比率來設定寬度。這樣一來就可以隨著瀏覽器寬度 或是螢幕寬度而改變部落格樣式寬度大小。這裡跟舊版的樣式有點不同是在於側邊欄位寬度也一起變寬喔！而不是固定的寬度，舊版的部落格只有中間欄位寬度會 變！
/*定位框*/
#wrap {
}
#container {
 position:relative;
 text-align: left;
 behavior:expression(this.style.width =  (document.documentElement.offsetWidth<990)?"990px":"100%");
 min-width:990px; margin:0px auto;
 align:center;
 padding: 0px 0px 0px 0px;
 background-color: #FFFFFF;
}
/*左欄*/
#linksLeft{
        width: 20%;position:relative;
        float: left;
        left: 5px;
        padding: 0px;
}
/*右欄*/
#linksRight{
        width: 20%;
position:relative;
        float: left;
        left: 59.6%;        padding: 0px;
}

/*中間欄*/
#mid{
position:relative;
width: 57.5%;float:right;
right:21%;padding: 0px 0px 0px 0px;
}

這些百分比率怎麼來的？！當然是以原本我採寬度為990px寬的container，以及側邊欄寬200px，中間欄寬570px的比例去換算的！三個欄中間都留5px的距離算的！這個範例當然僅是說三欄式的欄位比率。如果要用兩欄式，那就自己再改一下個別比例就可以了！
這就是我發現要做到隨著瀏覽器寬度(螢幕解析度)而改變部落格樣式寬度的一種解決辦法！給大家參考了