Try   HackMD

CSS 23. Relative Units - %, vw, vh / 相對單位

  • %
    在設定 width height 時,會相對去看父層的長寬度

    假設我們有一個外框,它的長寬條件為: 500px

<div class="container">
  <div class="box"></div>
</div>
.container {
  width: 500px;
  height: 500px;
  border: 3px solid blue;
}

// box 是子層,來設定寬度各 50% 看看

.box {
  background: red;
  width: 50%;
  height: 50%;
}

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 原理解釋:

    containerwidth / height500px

    那麼 box 的長寬設定 50$ = 500 * 0.5 的意思,也就是 250px


  • vw、vh:

    v = viewport,根據裝置的極限寬高來決定。

    例如: 90vh,就是瀏覽器的 90% 高度
    10vw,就是瀏覽器的 10% 高度

  • 範例

tags: 2022 網頁開發全攻略教程 / CSS篇章 - other