rem自適應布局用法

2021-09-26 23:55:27 字數 837 閱讀 4714

原理

css3規定:1rem的大小就是根元素的font-size的值。

通過設定根元素的font-size的大小來控制整個html文件內的文字大小、元素寬高、內外邊距等。

根據移動裝置的寬度大小來實現適應,不同的裝置都展示一致的頁面效果。

分為三步

一、拿到ui設計原型稿的寬高,如320px / 640px / 750px;

二、增加指令碼

以640px設計稿為例:

/* 設定根元素字型大小 */

function getrem()

/*6.4: 為設計稿寬度640px; 若是750px的設計稿 只需要將6.4改為7.5即可。

*在手機螢幕寬度與設計稿一致時,

* 即:owidth = 750px 那麼上面的計算 owidth / 6.4 + "px" 結果就是100px; html.style.fontsize = 100px

*css3中規定 1rem就對應這的font-size的大小,

*所以100px = 1rem 這樣方便大家將px轉化為rem 按照這個比例來設定字型大小、元素寬高、內外邊距等的單位為rem;

*舉例:在設計稿中,某一行字型大小為14px,則我們需要在css檔案中將對應的字型設定為0.14rem;

*在設計稿中,某乙個元素寬高分別為 100px與20px;則我們需要在css中將對應的寬高設定為1rem與0.2rem;

*/window.onload = function() ;

三、css檔案中記得都使用rem單位。 關鍵點:字型大小,元素寬高,內外邊距一定是根據設計稿測量得來的。對 是設計稿! 舉例是640px寬的設計稿,

Rem 自適應布局

1.先引入一下js,到頭部的script標籤的最前面。2.根據設計稿大小,調整裡面的最後兩個引數值。3.使用1 rem 100px轉換你的設計稿的畫素,例如設計稿上某個塊是100px 300px,換算成 rem則為1 rem 3rem。上面的 如果在 uc瀏覽器下橫屏與豎屏轉換,發現 並沒有 自適應...

自適應rem布局

自適應處理 假設 function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc,fals...

rem自適應布局

使用rem實現自適應布局,應該算是當前移動前端的一大趨勢,有些人對此還有點迷惑,搞不懂rem是如何實現自適應布局,如何根據設計稿來調整rem的值?rem布局如何用雪碧背景?rem一定要載入js嗎?rem的根html font size設定為多少合適?看看這篇文章,也許能幫到你。目前有兩種,一種是根據...