px妙轉rem

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

相關文章
相關標籤/搜索