px:像素,相對長度單位,相對於顯示器屏幕的分辨率而言(其實我我的認爲能夠理解爲固定單位);css
rem:這是個web前端中的新成員,是CSS3中新增的一個相對單位。相對的只是html根元素;html
一、設定兩個盒子(舉例)前端
1 <!-- 指定兩個盒子 --> 2 <div class="box1"></div> 3 <div class="box2"></div>
二、簡單設定樣式(px形式)web
1 /* 分別以 px 爲單位爲兩個設置兩個簡單樣式 */ 2 .box1 { 3 width: 50px; 4 height: 100px; 5 background-color: chartreuse; 6 } 7 .box2 { 8 width: 200px; 9 height: 125px; 10 background-color: aqua; 11 }
三、簡單設定樣式(px轉rem形式)spa
1 /* 指定相對根元素的相對值 2 * 通常css樣式初始化時候指定 3 * 值的指定通常是 50px 或 100px 4 * 緣由:便於計算 5 * 計算公式:px / 相對值 = rem 6 */ 7 html { 8 /* 我這裏指定 100px */ 9 font-size: 100px 10 } 11 .box1 { 12 width: .5rem; 13 height: 1rem; 14 background-color: chartreuse; 15 } 16 .box2 { 17 width: 2rem; 18 height: 1.25rem; 19 background-color: aqua; 20 }
四、兩種形式顯示基本同樣3d