HTML5 CSS3筆記 流式布局

2021-07-23 23:33:27 字數 710 閱讀 9187

那用 em 替換 px 還有什麼必要性或優越性呢?

有兩點顯而易見的理由:

一是那些使用 internet explorer 6 的使用者也將能夠縮放文字;

二是這樣做可以使我們設計師和開發者的生活更簡單。em 的實際大小是相對於其上下文的字型大小而言的。如果我們給body標籤設定文字大小為 100%,給其他文字都使用相對單位 em,那這些文字都會受 body 上的初始宣告的影響。這樣做的好處就是,如果在完成了所有文字排版後,客戶又提出將頁面文字統一放大一點,我們就可以只修改 body 的文字大小,其他所有文字也會相應變大。

「目標元素尺寸÷上下文元素尺寸=百分比尺寸」公式用於將文字的畫素單位轉換為相對單位。值得注意的是,現代瀏覽器的預設文字大小都是 16 畫素(顯式宣告的除外)。因此一開始給 body 標籤應用下列任何一條規則所產生的效果都一樣:

尺寸必須比其顯示尺寸更大以保證渲染效果,否則的話可能看起來很糟糕。基於這個原因,檔案的體積就永遠比實際顯示所需的大。

很多人都在研究這個問題,嘗試為較小的螢幕尺寸提供較小的。可以使用 matt wilcox 的「自適應」(了。matt wilcox 的解決方案則不需要對標籤做修改,而且他的方案會根據標籤中已經設定的全尺寸自動建立各種尺寸的。這種解決方案允許基於一組螢幕尺寸斷點,根據使用者需要為其提供不同的。

實現 adaptive images 解決方案需要 apache 2、php 5.x 和 gd 庫,也就是說需要 web 伺服器端程式設計。

HTML5 CSS3 響應式布局

響應式布局是ethan marcotte在2010年5月份提出的乙個概念,簡而言之,就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。優點 面對不同解析度裝置靈活性強 能夠快捷解決多裝置顯示適應問題 缺點 相容各種裝置工作量大,效率低下 累贅,會...

重頭學習html5 css3系列筆記(3)

復合選擇器 字型屬性 文字屬性 css 設定文字內容 字型,大小,對齊方式 的外形 寬度,邊框樣式,邊距 版面的布局和外觀顯示樣式 css美化html 讓html專注於結構 css由兩部分構成 選擇器 一條或多條宣告 css選擇器 又分基礎選擇器和復合選擇器兩大類 基礎選擇器 由單個選擇器構成,又包...

3 學習html5筆記

audio html5 標籤和video類似,沒有poster width height屬性 details詳情概要標籤 progress標籤進度 marquee 標籤 不在w3c標準 沒有語義,只是樣式,廢棄的標籤 有語義新增標籤 修改樣式使用css優於標籤屬性設定,方便改變需求,減少屬性的記憶。...