IT技術互動交流平臺

如何才能讓rem適配達到想要的效果呢

作者:whl  發布日期:2018-11-13 08:36:00

  隨著如今手機品種越增越多,就不說蘋果系列有多少款了,光是安卓就有小米、華為、魅族等數不勝數,因此程序員不可能為每一款手機都寫一套適合它的布局樣式,那么我們該怎么做呢?這個時候,我們就需要用到rem了,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、媒體查詢

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

媒體查詢

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

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

js設置html的fontSize

  3、使用vw、vh

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

使用vw、vh

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

vw、vh兼容性的表

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

  大家現如今對于前端的要求是越來越高了,為此一個合適的處理方法就十分有必要了。rem的使用方法其實是很簡單的,大家不需要害怕自己不會操作導致手機出問題之類的發生。以上就是今天要分享給大家的全部內容了,大家可以多學習學習,為以后需要做準備。

延伸閱讀:

Tag標簽: rem適配達到效果  
  • 專題推薦

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
香港最快开奖现场直播结果