网页常用单位-30天学会HTML＋CSS，制作精美网站

设置CSS样式大小时，会使用到各种不同的单位，尤其现在都制作响应式网站，用错单位，就会针对不同尺寸调整大小相当耗时，以下介绍网页常用各种网页单位，让你使用的更加得心应手。

绝对单位

px(像素)

网页最常使用的单位，你设定多少就是多少，不会受到其他元素影响。
假设你设定10px无论你在电脑版或手机版看都会显示10px。缺点就是缺乏弹性，在响应式网页，随着萤幕宽度变化，就要做个别的调整，因此建议用在不用随装置调整的地方。

下面范例你设定字体大小多大就显示多大，不会受其他因素影响。

<div style="font-size:20px;">font-size:20px
  <div style="font-size:18px;">font-size:18px
    <div style="font-size:16px;">font-size:16px
      <div style="font-size:15px;">font-size:15px
      </div>
    </div>
  </div>
</div>

相对单位

相对单位受父元素的影响，大小会随着当作基准的数值改变。

em

以父元素的大小为基准单位。
假设预设文字大小为15px，子元素会乘上父元素的值，导致越内层的文字越来越大。到最後网站就崩坏了ＱＱ

<div style="font-size:15px;">font-size:15px
  <div style="font-size:1.1em;">font-size:1.1em*15
    <div style="font-size:1.1em;">font-size:1.1em*1.1em*15
      <div style="font-size:1.1em%;">font-size:1.1em*1.1em*1.1em*15
      </div>
    </div>
  </div>
</div>

rem

rem是「root」+「em」，以根元素当作基础的单位。
假设预设文字大小为15px，子元素会乘上根元素的值，只会受根元素大小影响

<div style="font-size:15px;">font-size:15px
  <div style="font-size:1.1rem;">font-size:1.1rem*15
    <div style="font-size:1.1rem;">font-size:1.1rem*15
      <div style="font-size:1.4rem;">font-size:1.4rem*15
      </div>
    </div>
  </div>
</div>

%(百分比)

以父元素当作基准。
下面范例预设大小是15px，因为%是继承父元素，所以就会越来越大，与em显示方式相似。

<div style="font-size:15px;">font-size:15px
  <div style="font-size:110%;">font-size:110%*15
    <div style="font-size:110%;">font-size:110%*110%*15
      <div style="font-size:110%;">font-size:110%*110%*110%*15
      </div>
    </div>
  </div>
</div>

视窗单位

以下vw、vh、vmin、vmax四个单位是视窗单位也是相对单位。因为他们是针对视窗大小来决定。1单位类似1%。

vw / vh

vw是「viewport width」的缩写；vh是「viewpoint height」的缩写。以视窗(Viewport)浏览器实际显示的宽度和高度为基准的比例单位。
假设浏览器宽度为1400px，设定50vw的宽度就是1400的50%，也就是700px，会随着萤幕宽度而变动，因此很适合用在响应式网页。

vmin / vmax

当前视窗的vw及vh的最小值或最大值。
假设浏览器宽度为1040px，高度为750px，1vmin=750/100px=7.5px，1vmax=1040/100px=10.4px。
宽度为600px，高度为1000px，1vmin=600/100=6px，1vmax=1000/100=10px

资料来源：
https://www.oxxostudio.tw/articles/201809/css-font-size.html