|
創(chuàng)建自適應(yīng)內(nèi)容流動(dòng)布局
創(chuàng)建這種類型的布局，我們要做兩件事：為每一范圍分辨率的屏幕設(shè)立單獨(dú)的樣式；第二是確定用戶屏幕的分辨率。對(duì)此，Kevin Hale 在文章 Dynamic Resolution-Dependent Layout Technique 中作過詳細(xì)的介紹。
第一步是創(chuàng)建一系列可替代的布局文件。例如，一個(gè)稱之為narrow.css，其針對(duì)小分辨率的屏幕。另一個(gè)可稱之為normal.css，適應(yīng)于傳統(tǒng)的分辨率屏幕，第三可稱之為wide.css，將處理較大分辨率的屏幕。
我們可以使用js根據(jù)預(yù)設(shè)的樣式表作簡單的改動(dòng)，Dynamic Resolution Dependent Layouts 在演示頁中使用js解釋了如何使用它，于其它類型布局一樣，所有樣式和js文件都放在頭部。
<!-- Narrow style sheet -->
<link rel="alternate stylesheet" type="text/css" href="css/narrow.css"
title="narrow"/>
<!-- Default style sheet -->
<link rel="stylesheet" type="text/css" href="css/normal.css" title="default"/>
<!-- Wide style sheet -->
<link rel="alternate stylesheet" type="text/css" href="css/wide.css"
title="wide"/>
<!-- Included JavaScript to switch style sheets -->
<script src="scripts/dynamiclayout.js" type="text/javascript"></script>
注意到所有三個(gè)鏈接樣式單的title屬性：“narrow”、“default”、“wide”，在js源文件中查看DynamicLayout() 函數(shù)。可以看到，我們會(huì)很容易的根據(jù)每個(gè)title屬性來調(diào)用相應(yīng)的樣式，以及如何改變相應(yīng)的寬度。
function dynamicLayout(){
var browserWidth = getBrowserWidth();
// Narrow CSS rules
if (browserWidth < 640){
changeLayout("narrow");
}
// Normal (default) CSS rules
if ((browserWidth >= 640) && (browserWidth <= 960)){
changeLayout("default");
}
// Wide CSS rules
if (browserWidth > 960){
changeLayout("wide");
}
}
這種技術(shù)很容易實(shí)現(xiàn)，能夠與其它技術(shù)一起創(chuàng)建更多的可用性布局。仔細(xì)查看js，可以看到更多細(xì)節(jié)。
相似的技術(shù)
對(duì)于類似的技術(shù)，可以參閱 Brand Spanking New 的 Dynamic layouts with adaptive columns，他使用了大致相同的代碼，但略微不同，幸好有更多的選擇和腳本實(shí)例得到同樣的自適應(yīng)內(nèi)容。
要下載此版本自適應(yīng)內(nèi)容的腳本，請(qǐng)到 Dynamic layouts with adaptive columns。
這種概念并不難，關(guān)于此技術(shù)每個(gè)開發(fā)者都有自己的腳本，Clagnut.com博客的回帖中有更多關(guān)于自適應(yīng)內(nèi)容的布局和腳本－－“Variable fixed width layout“，在其回帖中甚至有一種技巧無需任何腳本－－CSS Drop Column Layout
。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 自適應(yīng)css布局——流動(dòng)布局新時(shí)代 [3] 下一頁 自適應(yīng)css布局——流動(dòng)布局新時(shí)代 [5]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 4 頁 自適應(yīng)css布局——流動(dòng)布局新時(shí)代 [4]
