• Abstraction 1
• Api 1
• Bare Metal 3
• Byebug 1
• C 1
• C++ 1
• Canvas 1
• Context 1
• Cross Origin 1
• Css 6
• DMG 1
• Dashboard 1
• Database 1
• Devise 2
• Disk Partition 1
• Diskutil 2
• Docker 3
• Eager Loading 1
• Encapsulation 1
• Factory Girl 1
• Friend 1
• GitHub 1
• GitHub Actions 1
• Google Cloud IAM 1
• Google Cloud Platform 1
• Helm 1
• ISO 1
• Image 1
• Influxdb 1
• Inheritance 1
• Installation 5
• Ipvs 1
• Javascript 1
• Kube Proxy 1
• Kubectl 2
• Kubernetes 10
• Load Balance 3
• Mac OS X 2
• MetalLB 3
• Minikube 1
• NFS 1
• Object-oriented-programming (OOP) 1
• Polymorphism 1
• PostgreSQL 1
• Rspec 2
• Ruby 28
• Ruby on Rails 17
• SQL 1
• Sass 4
• Semantic Version 1
• String 1
• Subdomain 1
• Terminal 2
• Tiller 1
• USB 1
• Ubuntu 3

Viewport Percentage Lengths

Viewport Percentage Lengths 有四個不同的單位，分別如下：

1
2
3
4

div {
  width: 100vw;
  height: 100vh;
}

100vh 與 100% 的差別

先舉個例子，讓外層 div 的高度只有 50px，內層 p 的高度分別為 100% 與 100vh，前者會是 上一層 的高度的百分比，後者是 瀏覽器 高度的百分比。

1
2
3
4
5
6
7

<div id="one">
  <p>100% Height</p>
</div>

<div id="two">
  <p>100vh Height</p>
</div>

1
2
3
4
5
6

div {
  height: 50px;
}

#one > p { height: 100%; }
#two > p { height: 100vh; }

See the Pen viewport by AkiiCat ( @AkiiCat ) on CodePen .

vmin 與 vmax 的差別與用法

假設現在瀏覽器的高是 1100px 寬是 700px，這樣 1vh 1vw 就會是 11px 7px。

1
2
3
4

div {
  width: 100vmin;
  height: 100vmin;
}

1
2
3
4

div {
  width: 100vmax;
  height: 100vmax;
}