移動端自適應rem的設定

2022-11-24 21:26:10 字數 907 閱讀 4286

一般所熟知的css樣式大小單位有px,em。

px:精確地描述元素大小,不隨螢幕大小的變化而變化;

em:相對於父元素的大小,如果有層層巢狀的話會導致這個值非常大或者非常小。

在寫移動端頁面的時候為了使頁面能夠適應多種尺寸的移動裝置大小,通常會用rem來表示各個元素的大小。

rem:font size of the root element,即相對於根元素字型的大小。

因此,在開發頁面之前,需要給根元素的字型指定一個值。

一般情況下,瀏覽器預設的根元素字型的大小是16px,因此為了方便計算,可以將根元素字型大小可以設定為

html

h1

然後通過**查詢針對不同的螢幕大小設定font-size的百分比,就可以實現前端頁面適配了。

還有一種方法是將根元素font-size的大小設定成螢幕寬度的一定比,這樣通過不同螢幕開啟時1rem的值自然也就不一樣了。

document.getelementsbytagname('html')[0].style.fontsize = window.screen.width /10 + 'px';

如果是iphone5的尺寸,那麼根元素字型大小就是32px;

如果是iphone6的尺寸,那麼根元素字型大小就是37.5px;

但是這樣我們在設定各個元素大小的時候就很難換算了啊。沒關係,css編譯工具可以解決這個問題。以less為例:

設定一個函式,假設設計圖是iphone的尺寸,設計圖上p的字型大小是12px,那麼p在不同螢幕的字型大小就是(12/37.5)rem。

.fs(@px)

p

其他的寬度和高度也寫成函式的形式。

因為某些低版本瀏覽器不支援css3或者預設字型不是16px,因此在pc端就不要再使用rem了。

移動端rem造成的很多問題

即將離職,回想在公司裡的點點滴滴,感慨良多。公司讓我成長了很多,也讓我進步了很多,現在的我,竟然有點不想離開公司,有點不想離職了。離職不離職先不說吧,先歸納之前做移動端出現過的很多很多問題。移動端用rem,但不能完全依賴rem,得看公司需求,若pc端和移動端都想一起做的話,那就全部都用rem,樣式只...

畫素2(pc端web中css的rem適配)(一)

常見適配的解決方案 在android用的是dp,在ccs中用的rem,在蘋果中用的pt這個單位,蘋果是以iphone6 因為電腦螢幕雖然大小存在差異,但差距也不是非常大,以中間範圍作為模板,根據解析度進行比例縮放,總是能湊合。rem這種方式,基本就能解決這個問題了。但是手機螢幕要小的多,那麼要顯示全...