常見的方法
body
使用畫素單位的優點:
為什麼這麼做不是無懈可擊的?
我們有哪些選擇?
表示相對大小的關鍵字
百分比值
表示絕對大小的關鍵字
他們之間都是以1.5倍為差
無懈可擊的方案:
通過em實現靈活的文字
rem單位
補充幾種響應式中使用的單位
- vh and vw
- 響應式web設計離不開百分比。但是,css百分比並不是所有的問題的最佳解決方案。css的寬度是相對於包含它的最近的父元素的寬度的。但是如果你就想用視口(viewpoint)的寬度或者高度,而不是父元素的,那該腫麼辦?這就是 vh 和 vw 單位為我們提供的。
- 1vh 等於1/100的視口高度。栗子:瀏覽器高度900px, 1 vh = 900px/100 = 9 px。同理,如果視口寬度未750, 1vw = 750px/100 = 7.5 px。比如,我們用很簡單的方法只用一行css**就實現同螢幕等高的框。
.slide
- vmin and vmax
- vh和 vw 依據於視口的高度和寬度,相對的,vmin 和 vmax則關於視口高度和寬度兩者的最小或者最大值。比如,瀏覽器的寬度設定為1100px,高度設定為700px, 1vmin = 7px, 1vmax = 11px。如果寬度設定為800px,高度設定為1080px, 1vmin就等於8px, 1vmax則為10.8px。
- 可以這樣定義乙個至少有兩個邊觸控到螢幕的方形:
.box
!(- 如果你要讓這個方形框框始終鋪滿整個視口的可見區域(四邊始終觸控到螢幕的四邊)
.box
!(結合使用這些單位可以為我們提供乙個新穎有意思的方式來靈活地利用我們視口的大小。
web設計 2 靈活的文字
最佳設計 可以讓使用者自由控制任何頁面的文字大小。瀏覽器中使用者都是可以自定義預設的文字大小的,如果使用 px,使用者自行在瀏覽器設定中改變了文字大小後,網頁上是不會變化的。我們不能排除視障使用者 如近視 老年使用者不會這麼做.利用css3的rem單位,避免了em相對父元素比例的巢狀問題,為了相容i...
無懈可擊的Web設計 pdf格式
無懈可擊的web設計 目 錄第1章 靈活的文字.1 1 常見的方法 1 2 權衡我們的選擇 1 3 無懈可擊的方法 1 4 為什麼說它是無懈可擊的 1 5 有了靈活基礎後的操作 1 6 結合使用關鍵字和百分比值 1 7 本章小結 第2章 可伸縮的導航欄 2 1 常見的方法 2 2 為什麼這樣做不是無...
設計靈活的程式
高階程式設計師首先是乙個高階的程式設計師,這樣的程式設計師不僅要有良好的分析能力,還要有高超的設計能力。乙個優秀的程式應該有這樣三個優秀特性 靈活性 穩定性 精準性。其中,靈活性是來自需求的多樣化。多元的需求會產生功能模組的最小化。最小化模組的設計準則 重要引數 復用度 一般是根據需求共性得出 核心...