wiki:css:css_note:css_units

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:css:css_note:css_units [2021/04/21 13:09]
emblim98
+++ wiki:css:css_note:css_units [2023/01/13 18:44] (현재)
@@ 줄 101: / 줄 101: @@
 </html>
 </code>
+====rem unit====
+<code css>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <style>
+    html {font-size: 16px; }
+    div {border: 1px solid #000; font-size: 3rem;}
+    #top-div {font-size: 2rem; border: 1px solid red;}
+  </style>
+</head>
+<body>
+  <p>The font-size of this document is 16px.</p>
+  <div id="top-div">
+    The font-size of this div element is 2rem, which translates to 2 x the browser's font size.
+    <div>The font-size of this div element is 3rem. It also shows that it does not inherit from its parent element font size.</div>
+  </div>
+  <p>The rem unit sets the font-size relative to the browser's base font-size, and will not inherit from its parents.</p>
+</body>
+</html>
+</code>
+====vw unit====
+<code css>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <style>
+    h1 {font-size: 20vw;}
+  </style>
+</head>
+<body>
+  <h1>Hello</h1>
+  <p>Resize the width of the browser window to see how the font-size of h1 changes.</p>
+  <p>1vw = 1% of viewport width</p>
+  <p>The vw unit is not supported in IE8 and earlier.</p>
+</body>
+</html>
+</code>
+====vh unit====
+<code css>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <style>
+    h1 {font-size: 20vh;}
+  </style>
+</head>
+<body>
+  <h1>Hello</h1>
+  <p>Resize the height of the browser window to see how the font-size of h1 changes.</p>
+  <p>1vh = 1% of viewport height</p>
+  <p>The vh unit is not supported in IE8 and earlier.</p>
+</body>
+</html>
+</code>
+====vmin unit====
+<code css>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <style>
+    h1 {font-size: 15vmin;}
+  </style>
+</head>
+<body>
+  <h1>Hello</h1>
+  <p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
+  <p>1vmin = 1vw or 1vh, whichever is smaller.</p>
+</body>
+</html>
+</code>
+====vmax unit====
+<code css>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <style>
+    h1 {font-size: 15vmax;}
+  </style>
+</head>
+<body>
+  <h1>Bonjour</h1>
+  <p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
+  <p>1vmax = 1vw or 1ch, whichever is larger.</p>
+  <p>The vmax unit is not supported in Edge 15 and earlier, nor in Safari 6.1 and earlier.</p>
+</body>
+</html>
+</code>

/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_units.1618978183.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)