移動端適配方案——1rem=100px公式是怎么計算的?

看了很多有關rem的文章,但是還是沒有看懂其中的原理以及公式怎么計算的,今天就講一下我的理解,不知道這樣理解合理不合理;

1.首先要知道rem是怎么用的,它是根據(jù)根元素大小來計算1rem到底等于多少px,如果根元素為100px,那么1rem=100px,2rem=200px;
模擬場景:設計師的設計稿假設為750px;
假設我們現(xiàn)在有兩個設備,一個設備的寬度就是750px,并且我給這個寬度為750px設備的根元素設置為100px,這樣1rem就等于100px了,很好計算;
另一個設備的寬度為變量dWidth;要想與設計稿的效果一樣,就要進行等比例縮放,此時我們需要求出另一個設備的根元素font-size值(X)為多少;
根據(jù)這些信息我們可以推導出以下這個公式:
dWidth/X=designwidth(750)/100=7.5;
根據(jù)小學數(shù)學可以得出X得值:
X=dWidth*100/desingWidth;
這樣就求出X的大小了,在實際開發(fā)中,我們根據(jù)設計稿的大小除以100就可以的出元素的rem大小;

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 在移動互聯(lián)網(wǎng)快速發(fā)展的今天,手機的種類和尺寸越來越多,作為前端的小伙伴們可能會越來越頭疼,但又不得不去適配一款又一...
    keenjaan閱讀 27,230評論 9 86
  • 前言:正好最近有時間,給移動端適配這里做一個整理,全面并且深入地重新去理解這些代碼的含義,不再只是代碼的搬運工,不...
    潘千千閱讀 2,809評論 0 3
  • 不知不覺做前端已經(jīng)兩年了,從PC端,移動端,微信小程序一路走來到今天剛剛開放注冊的快應用(手機廠商對抗小程序的新技...
    是ADI呀閱讀 3,253評論 0 10
  • 應用場景:培訓第一天的破冰游戲 項目性質:團隊合作+挑戰(zhàn) 使用道具:報紙 活動目的:讓隊員自然地進行身體接觸,學員...
    艾瑞克_李閱讀 2,511評論 0 0
  • 它是森林深處湖泊中的一株蓮,開開落落,歷了千百年,經(jīng)了風云變幻物換星移,漸漸有了靈性。 既有了靈性,便生煩惱,這一...
    元程閱讀 579評論 0 3

友情鏈接更多精彩內(nèi)容