rem與em的區別||結合使用rem與em

小劉吃飽飽發表於2020-11-06

注意:谷歌瀏覽器最低支援的font-size為12px;
火狐和ie瀏覽器沒限制

rem:
作用:適用不同解析度的頁面
相對於根元素html;給html設定一個font-size;所有元素的長度單位都用rem(倍數關係),若html設定的font-size:10px;那麼2rem就是20px;

好處:不同解析度,只需要改變根元素html的font-size即可改變所有子元素的大小,且相對格局不變

em:
相對於父元素;給父元素設定font-size;該父元素下的所有子元素可以以em為單位來設定大小。
若父元素的font-size:10px;子元素設定2em即為20px;

頁面佈局中一般將rem和em結合

html{
	font-size:10px
}
div{
	width:10rem;//100px
	height:10rem;//100px
	//若不設定font-size則預設為html的10px
	font-size :1.6rem//16px
	
}
div a{
	font-size:2em//2倍父元素div的font-size的大小 32px
}

在這裡插入圖片描述

相關文章