css中rem有什麼特點-css教學-PHP中文網

首頁

web前端

css教學

css中rem有什麼特點

王林

Nov 11, 2020 am 10:58 AM

css rem 特點

css中rem的特徵是：使用rem為元素設定字體大小時，仍然是相對大小，但相對的是HTML根元素，例如【.b{font-size: 2rem; //這裡就8px;}】。

css中rem有什麼特點

本教學操作環境：windows10系統、css3，本文適用於所有品牌的電腦。

rem：（相對於根元素的即HTML）

rem是CSS3中新增的一個相對單位，它與em的區別在於使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。它的使用非常簡單，透過改變根元素的大小就可以改變它的值(rem和em是類似的，就是相對的元素不一樣)

（學習影片分享：java影片教學）

px:（固定不變的）

px 是pixel 的縮寫，它的意思是像素的意思，在指定字體大小和元素的寬高的時候使用。像素是相對於顯示器螢幕解析度的

em:（相對於父元素的）

#em是一個相對長度的單位，是相對於目前物件內文字的字體尺寸。如過我們未設定目前文字的字體尺寸，那麼em就會相對於瀏覽器的預設字體尺寸

程式碼範例：

//em的值时相对于父元素，修改.a的大小，.b的大小会随之发生变化    
<style>
        .a{
            font-size: 4px;  //1em=4px
        }
        .b{
            font-size: 2rem;   //这里就8px;
        }
    </style>
</head>
<body>
    
    <div class="a">
        <p class="b">
            51515
        </p>
    </div>
 
</body>

登入後複製