詳解rem 適配布局

  發布時間:2018-10-31 15:26:26   作者:山核桃   我要評論

當今手機種類繁多,所以不可能每一款手機都要寫一套布局樣式,rem 就是用來自適應布局的,本文就詳細的介紹了rem 適配布局,具有一定的參考價值,感興趣的小伙伴們可以參考一下

當今手機種類繁多 且不說iphone系列,安卓手機的種類已經數不勝數了,所以不可能每一款手機都要寫一套布局樣式,這也是不可能做到的,但是對于越來越精益求精的前端來說 ,當然要找到一個合理的解決方案。rem 就是用來自適應布局的。

適配要達到的效果,如下圖(簡單的示范一下)

兩個div不論在大屏還是小屏上都是占據屏幕的一半

雖然上面這種簡單的使用百分比可以實現但是,百分比無法實現字體的自適應,百分比轉換成相應的尺寸還是很難的。接下來就說說這次我們的主角 rem (我們一般只適配寬度)

rem 原理解析

首先rem是一個相對于根元素fontSize大小的相對單位,也就是說 1rem 等于 html 的 fontSize 大小, 接下來我們只需要改變html 元素的 fontSize 就可以控制 rem 的大小。接下來我們怎么適配不同的屏幕呢,只要我們做到 屏幕寬度越大 1rem 表示的px值越大及HTML的fontSize值越大,也就是說 HTML的fontSize要于屏幕的寬度成正比。

再說一下一些概念 設備像素比設備物理像素設備獨立像素 (有時也說是虛擬像素)

設備像素比 = 設備物理像素 / 設備獨立像素

設備物理像素: 設備上顯示的最小單位

設備獨立像素: 獨立于設備的用于邏輯上衡量像素的單位(css尺寸)。

就拿iphone6/7/8 做說明iphone6/7/8的物理像素是750,是設備的實際尺寸,而px是是設備獨立像素單位,iphone6/7/8是2倍屏,它的css尺寸就是 375, 設備像素比是設備出廠時已經設置好的。 那么我們怎么實現適配?

這就用到最流行的rem了

rem的實現方案

首先、根據不同屏幕的設備物理像素,要跟html元素的fontSize設置不同的px大小

1、媒體查詢

html{
		font-size:16px;
	}
@media screen and (min-width:240px) {
    html {
        font-size:9px;
    }
}
@media screen and (min-width:320px) {
	html {
		font-size:12px;
	}
}
@media screen and (min-width:375px) {
	html{
		font-size:14.0625px;
	}
}

利用@media screen and (min-width:XXX)來判斷設備的尺寸,進而設置html的fontSize

2、js設置html的fontSize(網易方案)

function setRem () {
        let htmlRem = document.documentElement.clientWidth
        document.documentElement.style.fontSize = htmlRem/7.5 + 'px'
      }
setRem()

以上代碼是以iphone6為設計稿,結果是1rem=100px的實際像素,因為iphone6的設備像素比是2所以1rem在瀏覽器的預覽中是50px,也就是實現了1rem和設備寬度成7.5倍的關系,設備寬度改變1rem的實際大小也會改變,而且在屏幕中的比例是沒有變的。(市面上大多數是這種方案)

3、使用vw、vh

html{
    font-size: 10vw
}

vw、vh是新的一種相對單位是把可視區域分的寬高為100份類似于百分比布局,這種方案它不用去寫js,不過兼容性有點差

下面附上vw、vh兼容性的表

每篇一省 rem是相對于根元素的fontSize,所以所有努力就是設置根元素的fontSize與設備寬度成正比

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 關于rem適配的3種常用封裝

    這篇文章主要給大家介紹了關于rem適配的3種常用封裝,文中通過示例代碼介紹的非常詳細,對各位前端開發者們具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學
    2018-07-13
  • 移動 web 端屏幕適配(rem)

    這篇文章主要介紹了移動 web 端屏幕適配(rem)。詳細的介紹了移動 web 端屏幕適配(rem),小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-25
  • 詳解html5頁面 rem 布局適配方法

    本篇文章主要介紹了詳解html5頁面 rem 布局適配方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-12
  • 詳解H5 活動頁之移動端 REM 布局適配方法

    這篇文章主要介紹了詳解H5 活動頁之移動端 REM 布局適配方法的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-07
  • 手機端用rem+scss做適配的詳解

    這篇文章主要介紹了手機端用rem+scss做適配的詳解,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-15

最新評論

时时彩包赢公式0369