中止使用px單位吧

時間 2019-11-09

標籤中止使用單位欄目 CSS 简体版

原文原文鏈接

原文連接html

em單位

em單位是基於font-size的繼承來計算的web

.parent {
  font-size: 16px;
}

.parent > .child {
  font-size: 1.2em; /* 19.2px */
}

一樣使用em，font-size vs 其餘屬性

相同的比例，不一樣的計算結果；svg

使用em單位時，margin、padding等屬性是基於當前元素的font-size計算。而當前元素的font-size則是基於父元素。spa

.tile {
  font-size: 1.2em;     /* 19.2px */
  margin: 1.2em;        /* 23.04px */
  padding: 1.2em;       /* 23.04px */
  border-radius: 1.2em; /* 23.04px */
}

深度嵌套em

致使文本收縮問題

ul {
  font-size: 0.8rem;
}

解決辦法 rem

"Root em" - 相對於根節點(<html>)的font-size來計算code

使用rem

ul {
  font-size: 0.8rem;
}

建議

默認狀況下：
rem用做font-size單位，
px用做border-width單位，
em用做padding,margin,border-radius等等orm

其餘

爲line-height使用無單位的數字htm

使用單位：一個混合計算的結果
無單位：根據後代的font sizes自動變化blog

em還有不少優勢

更精確
代碼簡單
更好的適應性繼承

[但願的尺寸]/[基礎尺寸]

14px / 16px = 0.875em
18px / 14px = 1.2857em圖片

印刷排版的基礎 - Robert Bringhurst

好看的印刷排版通常用的是比率

對於web印刷排版有着相同的處理

使用標量去計算px單位的font sizes，再轉換爲一個em標量

可調整尺寸的模塊

改變尺寸調整px是沉悶的

在一個容器上，肯定一個fontsize基礎值

在模塊的根節點上使用rem,其餘所有使用em

使用rem做爲全局尺寸單位
使用em做爲區域尺寸單位

縮放模塊

.tile {
  border: 2px solid #000;
  padding: 0.6em 1.2em;
  border-radius: 0.3em;
  margin-bottom: 1em;
  font-size: 1rem;
}

.tile__title {
  font-size: 0.8em;
  text-transform: uppercase;
}

縮放形狀

.dropdown__toggle::after {
  content: "";
  position: absolute;
  right: 1em;
  top: 1em;
  border: 0.3em solid;
  border-color: black transparent transparent;
}

縮放圖標/圖片

.twitter > img {
  height: 1em;
  width: 1em;
  vertical-align: -0.1em;
}

縮放陰影

a:link {
  text-decoration: none;
  box-shadow: inset 0 -0.1em 0 0 #cef;
  transition: box-shadow 0.2s ease-in-out;
  color: #346;
}

a:hover {
  box-shadow: inset 0 -1.2em 0 0 #cef;
}

一些祕訣

能夠縮放斷點

:root {
  font-size: 0.8em;
}

@media (min-width: 35em) {
  :root {
    font-size: 1em;
  }
}

@media (min-width: 50em) {
  :root {
    font-size: 1.25em;
  }
}

視圖相關的單位

vw - 視圖寬度的1%vh - 視圖高度的1%vmin - vh/vw中較小的那個vmax - vh/vw中較大的那個

相關文章

相關標籤/搜索

Hibernate教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<