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

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

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

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

  

 

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

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

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

  800pixels / 960pixels = 0.91667

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

  #wrapper {

  width: 92%;

  }

  對于content和sidebar區(qū)域,我們如法炮制,但需保持正確的比例。因為這個區(qū)域在880px的wrapper內,我們需要找到相對于這個區(qū)域的百分比。

  640 pixels ÷ 880 pixels = 0.727272 › 73%

  220 pixels ÷ 880 pixels = 0.25 › 25%

  width: 73%;

  }

  #sidebar {

  width: 25% ;

  6.}

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

  

 

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

  關于margin

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

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

相關文章

最新評論