停止使用px單位吧

Cheng_Gang 發布于2019-08-30 13:16 / 2357人閱讀

摘要：原文鏈接單位單位是基于的繼承來計算的同樣使用，其他屬性相同的比例，不同的計算結果使用單位時，等屬性是基于當前元素的計算。

原文鏈接

em單位

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

.parent {
  font-size: 16px;
}

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

同樣使用em，font-size vs 其他屬性

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

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

.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" - 相對于根節點()的font-size來計算

使用rem

ul {
  font-size: 0.8rem;
}

建議

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

其他

為line-height使用無單位的數字

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

em還有很多優點

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

[希望的尺寸]/[基礎尺寸]

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

pxtoem.com

印刷排版的基礎 - Robert Bringhurst

好看的印刷排版一般用的是比率

type-scale.com

對于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;
}

demo

縮放形狀

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

demo

縮放圖標/圖片

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

demo

縮放陰影

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;
}

demo

一些秘訣 可以縮放斷點

: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中較大的那個

云服務器 GPU云服務器阿里云停止服務器不會影響數據吧停止使用停止使用ecs 阿里云服務器停止使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115435.html

停止使用px單位吧

摘要：原文鏈接單位單位是基于的繼承來計算的同樣使用，其他屬性相同的比例，不同的計算結果使用單位時，等屬性是基于當前元素的計算。原文鏈接 em單位 em單位是基于font-size的繼承來計算的 .parent { font-size: 16px; } .parent > .child { font-size: 1.2em; /* 19.2px */ } 同樣使用em，font-...

RobinQu 2019-08-01 16:06 評論0 收藏0
如何更愉快地使用rem —— 別說你懂CSS相對單位

摘要：值得注意的是，這個設置對使用或其他絕對單位定義的字號大小無效。事實上，提供了一個在和間的相對單位折中解決方案，而且更易于使用。圖使用相對單位和繼承字號的面板下面是模板，加到你的頁面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其...

Snailclimb 2019-08-30 15:54 評論0 收藏0
如何更愉快地使用em —— 別說你懂CSS相對單位

摘要：相對單位的值會根據外部影響因素的變化而變化。很自然，相對單位使用起來會比較困難。在本章中，我將揭開相對單位的神秘面紗。重點來了，使用相對單位聲明的值會由瀏覽器轉化為一個絕對值，我們稱之為計算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《W...

gekylin 2019-08-30 15:54 評論0 收藏0
JS基礎入門篇（十三）—定時器

摘要：但是定時器沒關。通過變量來控制定時器內函數的執行停止播放默認為。方式三通過關閉定時器來停止輪播圖的運動。，通過傳入定時器的編號來。清除定時器，再開啟定時器。所以，每次打開定時器，先清除前一個。點擊頁面任何一個位置關閉定時器。 1.定時器定義：當我們需要隔一段時間，再執行一段代碼。或者每隔一段時間，執行一段代碼。我們可以使用定時器。使用場景：例如網站輪播圖的自動滾動。廣告延遲彈出的某些...

kaka 2019-08-29 15:31 評論0 收藏0