程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程解疑 >> 浏覽器-rem單位的好處是什麼?

浏覽器-rem單位的好處是什麼?

編輯:編程解疑
rem單位的好處是什麼?

現代浏覽器推薦使用rem作為字體的單位,好處是什麼呢?特別是在移動端。

請詳細說明一下,謝謝!

最佳回答:


rem是什麼?

rem(font size of the root element)是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位,em(font size of the element)是指相對於父元素的字體大小的單位。它們之間其實很相似,只不過一個計算的規則是依賴根元素一個是依賴父元素計算。

為什麼web app要使用rem?

1、實現強大的屏幕適配布局:

iphone6一下出了兩款尺寸的手機,導致的移動端的屏幕種類更加的混亂,記得一兩年前做web app有一種做法是以320寬度為標准去做適配,超過320的大小還是以320的規格去展示,這種實現方式以淘寶web app為代表作,但是近期手機淘寶首頁進行了改版,采用了rem這個單位,首頁以內依舊是和以前一樣各種混亂,有定死寬度的頁面,也有那種流式布局的頁面。

我們現在在切頁面布局的使用常用的單位是px,這是一個絕對單位,web app的屏幕適配有很多中做法,例如:流式布局、限死寬度,還有就是通過響應式來做,但是這些方案都不是最佳的解決方法。

例如流式布局的解決方案有不少弊端,它雖然可以讓各種屏幕都適配,但是顯示的效果極其的不好,因為只有幾個尺寸的手機能夠完美的顯示出視覺設計師和交互最想要的效果,其他布局如:固定寬度,viewport等都有相對缺陷。

而rem能等比例適配所有屏幕

上面說過rem是通過根元素進行適配的,網頁中的根元素指的是html我們通過設置html的字體大小就可以控制rem的大小。

2、沒有屏幕字體縮放問題:
px像素會在某些浏覽器設置頁面縮放比的情況下,下字體不按比例縮放。rem是相對大小,沒有這種問題

3、沒有em多次使用計算麻煩的問題:
em是相對於父元素的大小,當層級較多,需要使用時,容易遇到無法預知的風險,也麻煩,而rem統一相對根元素,沒有這種弊端。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved