響應式網頁設計 rem em設定網頁字型大小自適應

2021-07-08 09:27:10 字數 781 閱讀 3979

「rem」是指根元素(root element,html)的字型大小,好開心的是,從遙遠的 ie6 到版本帝 chrome 他們都約好了,根元素預設的 font-size 都是 16px。這樣乙個新的單位相容性如何呢?

ie9+,firefox、chrome、safari、opera 的主流版本都支援了,我可以放肆的使用 rem 了。

em 的計算是基於父級元素的,在實際使用中給我們的計算帶來了很大的不便。所以 rem 的出現解救了我這樣不會算術的人,再也不用擔心父級元素的 font-size 了,因為它始終是基於根元素(html) 的。

比如預設的 html font-size=16px,那麼我想設定12px 的文字就是:12÷16=0.75(rem)

當然,你可以引入 css 預處理工具(sass、less 、stylus等)自動計算 rem 值,這裡就不一一舉例了。

但是像我這樣的懶人或者團隊開發中還沒有引入 css 預處理工具的該腫麼辦呢?只能搬個計算器啪啪啪了嗎?別急,你還可以變通一下。我們改變一下 html 的預設 font-size=10px 不就好計算了嘛!like this:

html body p
需要注意的是,為了相容不支援 rem 的瀏覽器,我們需要在 rem 前面寫上對應的 px 值,這樣不支援的瀏覽器可以優雅降級。其實不用太糾結是預設的 font-size:100%,還是設定為 font-size:62.5%,如果你引入了 css 預處理工具那麼自然可以使用預設值,如果由於其他原因使用 font-size:62.5% 也無可厚非,完全可以在 body 中重置回你需要的預設 font-size。

響應式網頁設計 rem em設定網頁字型大小自適應

rem 是指根元素 root element,html 的字型大小,好開心的是,從遙遠的 ie6 到版本帝 chrome 他們都約好了,根元素預設的 font size 都是 16px。這樣乙個新的單位相容性如何呢?ie9 firefox chrome safari opera 的主流版本都支援了,...

響應式網頁設計示例

若要全方位測試你自己或別人的響應式 則需要針對每一種裝置和不同的螢幕尺寸,分別準備不同的測試系統。儘管這是最完美的辦法,但通過改變瀏覽器視窗大小其實就可以完成大多數測試。除此之外,還有很多第三方外掛程式和瀏覽器擴充套件可供選擇,通過它們可以將當前瀏覽器視窗或視口設定為指定畫素。必要時,還可以自動將當...

響應式網頁設計初探

我首次接觸響應式網頁設計還要從應用bootstrap說起。我們運用bootstrap的網格類簡單的將響應式設計帶入我們的網頁設計當中,當然bootstrap框架其實還做了其他事情以支援網頁響應式設計。現在,就讓我們一窺響應式網頁設計背後的原理。實現響應式設計的前提 允許網頁縮放 視口的 meta 標...