css 單位 rem,em,px
阿新 • • 發佈：2021-06-22
css單位
css單位分為相對和絕對
絕對單位包括：px
相對單位包括：
| 單位 | 相對於 |
|---|---|
| em | 在 font-size 中使用是相對於父元素的字型大小，在其他屬性中使用是相對於自身的字型大小，如 width |
| ex | 字元“x”的高度 |
| ch | 數字“0”的寬度 |
| rem | 根元素（html）的字型大小 |
| lh | 元素的 line-height |
| vw | 視窗寬度的 1% |
| vh | 視窗高度的 1% |
| vmin | 視窗較小尺寸的 1% |
| vmax | 檢視大尺寸的 1% |
例子：
<html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title></title> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="" /> <style> .em { font-size: 16px; width: 10em; border: 1px solid red; } .em1 { font-size: 1.2em; width: 10em; border: 1px solid red; } .wrap { font-size: 20px; } html { font-size: 20px; } .rem { font-size: 1.5rem; width: 10rem; border: 1px solid red; } </style> </head> <body> <div class="em">我是em單位 width=16*10</div> <div class="wrap"> <div class="em1">我的font-szie em font-size =1.2*20=24 width=24*10</div> </div> <div class="rem">我是rem單位 font-szie= 20*1.5 =30 width=20*10</div> <script></script> </body> </html>