輕鬆運用rem佈局 以及rem與em區別

rem 佈局的定義：  css(相對單位，是相對於網站根元素的font-size來計算大小，比如說html的font-size:100px,那麼設置的0.1rem就是10px,如果沒有設html的字體大小，就是依據瀏覽器的默認字體大小，一般默認是16px，用戶可以自行設置，所以在使用rem佈局的時候，第一步就是給html設置font-size)

使用場景，一般呢 rem佈局是用來適配手機和ipad

rem 佈局中的尺寸計算

     其實本質上還是等比縮放，一般是基於寬度，假設我們將屏幕寬度平均分成100份，每一份用x表示，x=屏幕寬度/100，如果將x作爲單位，x前面的數值就代表屏幕寬度的百分比。

 在使用中 我們先將html的font-size設置爲100px,然後在去根據這個設置所有佈局，都用百分比來計算，例如設計圖給的是100px,我們就設置爲1rem。實際的htmlfontsize/實際屏幕寬度 = 初次設置的html fontsize/設計尺寸（html的fongt-size設置成100px,爲了計算下面的px換算rem更方便）

        假如設計稿是按照375的尺寸設置的100px,那麼就是

        現在要設置的font-size /  此刻屏幕寬度  =  100px / 375

我們只需要用js代碼來檢測手機屏幕的寬度，當屏幕寬度變化時候重新設置html的font-size，這樣之前所有設置的rem都會按比例縮縮放。

<script>
	autoSize();
	// 直接打開就執行

	window.onresize=function(){
		autoSize();
		// 設備尺寸變化纔會執行
	}
	function autoSize(){
		var w=document.documentElement.clientWidth;
		console.log(w);
		//計算實際html font-size 大小
		var size=w*100/375;
		var html=document.querySelector('html');
		//設置實際字體大小
		html.style.fontSize=size+'px';

	}

</script>

示例

        html{
			font-size: 100px;
		}

		body,h2,h5,a,input{
			margin: 0;
			padding: 0;
			text-decoration: none;
			outline: none;
			font-family: PingFangSC-Regular;
		}

		.header{
			padding: 0.14rem;
			background: #37AAA0;
			font-size: 0.16rem;
			color: #FFFFFF;
			text-align: center;
			font-weight: lighter;
        }

最後呢，就是rem 與 em的區別

rem在沒有設置html的font-size的時候是根據瀏覽器默認字體大小進行計算的，設置了html，就會依靠html的font-size

em是根據自身的font-size進行計算的，有的人會說是根據父級的font-size,，其實是因爲font-size具有繼承性，如果給自身元素設置了font-size就覆蓋了繼承父級的字體大小，個人建議設置em的時候需要給自身元素設置font-size,父級會無限向上繼承，最終會導致em的計算差強人意。使用場景，用在一段文字的縮進text-indent:2em;我們可以設置2em,首字符縮進兩個字符的大小,等類似場景