成都網(wǎng)站建設(shè)關(guān)于CSS中rem布局的講解

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

REM

REM這個(gè)單位，會(huì)根據(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ù)挠?jì)算，當(dāng)前屏幕的寬度，html的font-size是多少px就OK了。

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

比如，我們拿到的設(shè)計(jì)稿是750px，那就設(shè)置成當(dāng)屏幕寬度是750的時(shí)候，html的font-size就是100px（當(dāng)然這個(gè)100px你可以隨意設(shè)置的，我設(shè)置成100px只是方便我計(jì)算），然后就根據(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)行計(jì)算font-size的。

以上就是從事成都網(wǎng)站建設(shè)的創(chuàng)新互聯(lián)公司為大家?guī)淼年P(guān)于rem布局的相關(guān)介紹，希望大家能夠喜歡。

文章題目：成都網(wǎng)站建設(shè)關(guān)于CSS中rem布局的講解
文章起源：http://www.muchs.cn/news38/320188.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、搜索引擎優(yōu)化、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)