平時響應式網站的開發，我都會先對比PC和MObiLE的設計稿，看看有什么區別，然后才進行編寫css。通常都是使用flex。寬度盡量用百分比，間距、高度、字體大小使用em，就可以很方便的進行大小的控制。今天成都網站建設公司成都創新互聯為大家詳細的講解一下什么是rem布局。

REM

REM這個單位，會根據html的font-size大小進行轉換。

html{font-size:100px;}

p{padding-top:.5rem;}

.5rem=50px/100

轉換后p的padding-top就是50px了。只要我們進行適當的計算，當前屏幕的寬度，html的font-size是多少px就OK了。

如何計算當前html的font-size值

比如，我們拿到的設計稿是750px，那就設置成當屏幕寬度是750的時候，html的font-size就是100px（當然這個100px你可以隨意設置的，我設置成100px只是方便我計算），然后就根據當前屏幕的寬度/750*100，就得到了當前屏幕寬度的font-size值。

/當前屏幕寬度/750=當前屏幕寬度的font-size/100

//代碼如下

(function(doc,win){

vardocEl=doc.documentElement,

resizeEvt='orientationchange'inwindow?'orientationchange':'resize',

recalc=function(){

varclientWidth=docEl.clientWidth;

if(!clientWidth)return;

docEl.style.fontSize=100*(clientWidth/750)+'px';

};

if(!doc.addEventListener)return;

win.addEventListener(resizeEvt,recalc,false);

doc.addEventListener('DOMContentLoaded',recalc,false);

})(document,window);

上面這段代碼，是直接根據屏幕寬度進行計算font-size的。

以上就是從事成都網站建設的創新互聯公司為大家帶來的關于rem布局的相關介紹，希望大家能夠喜歡。

文章題目：成都網站建設關于CSS中rem布局的講解
文章起源：http://m.2m8n56k.cn/news38/320188.html

成都網站建設公司_創新互聯，為您提供定制開發、搜索引擎優化、移動網站建設、外貿網站建設、網站改版、網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯