欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

創(chuàng)造100% 自適應(yīng)css布局的行之有效的方法

  發(fā)布時間:2009-08-14 02:15:07   作者:佚名   我要評論
在這篇文章,我們將討論創(chuàng)造100%功能自適應(yīng)css布局的行之有效的方法,并提供其他教程和實踐的詳細(xì)清單.
流動網(wǎng)頁設(shè)計有很多好處,但也只有在正確使用的時候。合適的技巧會使頁面在大屏幕、小屏幕抑、PDA小屏幕上都能得到良好的呈現(xiàn)。但是,糟糕的代碼結(jié)構(gòu),對于流動布局來說將是災(zāi)難性的。因此,我們需要針對大多數(shù)流動設(shè)計的缺點尋求可行的解決方案。
  如果你作為設(shè)計師通過額外的付出創(chuàng)造了一個功能性流動布局,為什么不更進(jìn)一步使其兼容所有分辨率,而不是局限于大多數(shù)屏幕。你可以使用一些技巧創(chuàng)造一種意想不到的適應(yīng)性布局,這種布局在不斷改變屏幕分辨率情況下會保持功能上的完整性。
  在這篇文章,我們將討論創(chuàng)造100%功能自適應(yīng)css布局的行之有效的方法
  一、使用網(wǎng)格的流動布局
  我們大多數(shù)人都聽說過設(shè)計固定寬度網(wǎng)頁的 960網(wǎng)格系統(tǒng) ,使用960網(wǎng)格系統(tǒng)使得固定寬度的設(shè)計比流動布局更可取。但是,有一種方法可以創(chuàng)建一個基于網(wǎng)格的彈性布局。從技術(shù)上講,彈性布局的代碼結(jié)構(gòu)不同于流動布局,但它為用戶提供的幾乎是相同的效果。
  什么是流動布局?
  流動網(wǎng)格是通過智能的使用div、百分比和簡單的數(shù)學(xué)計算來創(chuàng)建的。這種理念來自于Ethan Marcotte ,他認(rèn)識到“em”比字體大小進(jìn)步。我們在這重溫這個基本概念,但要對該方法有一個全面而詳細(xì)的了解,請參閱“流動網(wǎng)格”,這是一篇全面的關(guān)于建立基于網(wǎng)格的彈性布局的教程。
  其理念是使用相對尺寸、結(jié)合百分比和em,用簡單的分割以找到相對應(yīng)的像素寬度,而這些寬度是在固定寬度設(shè)計中使用的。
  優(yōu)點:
  這種方法使你擁有一個網(wǎng)格布局,這看起來可能僅固定一次寬度;
  用戶可以使用預(yù)設(shè)的字體大小查看這個布局,并且保持其比例大小;
  布局樣式跨瀏覽器兼容;
  一旦理解之后,流動設(shè)計中的大多數(shù)問題將容易修復(fù)。
如何讓創(chuàng)建一個流動布局?

  創(chuàng)建流動布局的第一步是創(chuàng)建一個首選的固定寬度的模擬,這樣一來,設(shè)計師能看到其比例,然后使用神圣的比例、平衡和合適的間距技巧。

  

 

  從上述簡單的布局中,我們可以看到如何在css中規(guī)劃代碼。960px是我們的固定寬度,對于任何小于該尺寸的分辨率屏幕,我們將迫使水平滾動條出現(xiàn)。所有內(nèi)容在一個880px的wrapper里,在左右兩側(cè)有40 px的margin,元素間有20px的間距。

  在我們思考其可用性之前,一切安好。這種類型的布局可能適合很多用戶,但未必適合每一個人。因此,我們將其轉(zhuǎn)換成流動布局,如果欲使這一布局在任何分辨率下保持其比例,我們必須將960px的寬度改為100%,然后計算出與880px、640px、200px等值的百分比。

  這需要一些理性思考,在我們模擬的固定寬度設(shè)計中,在960px的設(shè)計中,整個wrapper是880px,如果需要與其等價的百分比,我們所要做的是相除。

  800pixels / 960pixels = 0.91667

  采用十進(jìn)制,將其轉(zhuǎn)換成百分比,得到的是91.6667%。因為當(dāng)前瀏覽器處理百分比的差異,它不會很明智的將所有小數(shù)位數(shù)應(yīng)用到布局之中,瀏覽器要么向上取,要么向下舍。因此,我們需要一個整數(shù),既然它更接近于92%,我們就向上取,稍后因為額外間隙的存在,我們需要向下舍,這很容易做到。

  #wrapper {

  width: 92%;

  }

  對于content和sidebar區(qū)域,我們?nèi)绶ㄅ谥?,但需保持正確的比例。因為這個區(qū)域在880px的wrapper內(nèi),我們需要找到相對于這個區(qū)域的百分比。

  640 pixels ÷ 880 pixels = 0.727272 › 73%

  220 pixels ÷ 880 pixels = 0.25 › 25%

  width: 73%;

  }

  #sidebar {

  width: 25% ;

  6.}

  我們將實際內(nèi)容區(qū)域的寬度降至72%,這樣我們的布局就不會破壞。因為它位于導(dǎo)航欄的旁邊,我們不希望它太寬。

  

 

  在處理流動設(shè)計的比例時,這是一個非常簡單的概念,也是更有效的處理方式。借助于這樣的技巧,設(shè)計者沒有理由說不能保持其比例,美觀的布局被破壞。

  關(guān)于margin

  設(shè)計者可以用不同的方法處理margin,一種方法是計算margin的百分比(此例中為200px/880px);另外一種是設(shè)置固定的margin,在我們的例子中,硬性大小為20px。

  兩種方法各有優(yōu)劣,margin使用百分比,設(shè)計師承擔(dān)者在大分辨率屏幕下margin太大的風(fēng)險但能保持完好的比例。用固定的margin在比例的保持上有輕微的缺陷,但是,無論屏幕分辨率為多大,margin將維持不變。

相關(guān)文章

最新評論