平時響應(yīng)式網(wǎng)站的開發(fā)，我都會先對比PC和MOBILE的設(shè)計稿，看看有什么區(qū)別，然后才進(jìn)行編寫css。通常都是使用flex。寬度盡量用百分比，間距、高度、字體大小使用 em，就可以很方便的進(jìn)行大小的控制。今天石家莊網(wǎng)站建設(shè)公司石家莊尚武科技為大家詳細(xì)的講解一下什么是rem布局。

　　REM

　　REM這個單位，會根據(jù)html的font-size大小進(jìn)行轉(zhuǎn)換。

　　html{font-size:100px;}

　　p{padding-top:.5rem;}

　　.5rem=50px/100

　　轉(zhuǎn)換后p的padding-top就是50px了。只要我們進(jìn)行適當(dāng)?shù)挠嬎悖?dāng)前屏幕的寬度，html的font-size是多少px就OK了。

　　如何計算當(dāng)前html的font-size值

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

　　/當(dāng)前屏幕寬度/750=當(dāng)前屏幕寬度的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);

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

　　以上就是從事石家莊網(wǎng)站建設(shè)的尚武科技公司為大家?guī)淼年P(guān)于rem布局的相關(guān)介紹，希望大家能夠喜歡。