很高興又見面了！😊
在我們創建適合各種設備的回應式網站時，了解正確的CSS 單位很重要，不過在深入研究決策之前，讓我們先對它們進行分類以便了解它們的用途，
如何決定回應式網站的 CSS 單位？
- 🚁 px 單位
- 🎪 ％ 單位
- ? em 單位
- 🛵 rem 單位
- 🚋 vw 單位
- 🛸 vh 單位
- 🛬 wuhu ! 起飛 !
- 概括總結
1.絕對單位
- px - 像素
- pt - 點
- pc - Picas
- in - 英寸
- cm - 厘米
- mm - 毫米
2.百分比單位
- 百分比 % 單位
3.相對單位
-
相對于字體大小
- em
- rem - 根 em
-
相對于查看埠/檔案
- vw
- vh
- vmax
- vmin
在這里學習最常見的單位 👇
🚁 px 單位
絕對像素單位僅用于螢屏（界面），其余單位用于列印，px 單位不是一個好的選擇，實際上這不是用于縮放，無論您選擇什么螢屏尺寸，px 單位的尺寸都是固定的，這就是為什么邊框總是首選 px 單位的原因，因為邊框在所有螢屏尺寸上也保持固定，
🎪 ％ 單位
這用于設定元素的寬度，它總是相對于其直接父元素的大小，如果沒有定義的父級，則默認情況下body被視為父級，
考慮一個寬度為 500px 的盒子，里面有一個 h1 元素
.box{
width: 500px;
border: 1px solid crimson;
padding: 10px;
}
h1{
width: 50%;
border: 1px solid;
}
效果👇
👉如果沒有定義父級，那么 root 將被視為默認父級，
? em 單位
em 單位總是相對于它的直接父級的字體大小，1em ==
一個父字體大小，如果未覆寫，默認字體大小為 16px，假設在父元素中字體大小為 48px，那么在子元素中為 1em == 48px，
h1{
font-size: 1em; /* now 1em == 16px */
}
效果👇
.container{
font-size: 48px;
/* 或 3em，因為默認字體大小是 16px
& 它的父元素是 body，所以 3*16px 就是 48px */
}
h1{
font-size: 1em; /* now 1em == 48px */
}
效果👇
我們可以將這個單位用于邊距和填充，因為它可以讓我們根據元素的字體大小在框周圍使用靈活的間距，元素 font-size 會根據設備大小而變化，因此元素周圍的間距也將分別發生變化，
🛵 rem 單位
r 代表 root em，與 em 不同，它總是相對于根字體大小，無論它的下一個父元素具有什么字體大小，如果根已經重新定義了字體大小，如 60px 那么 1rem == 60px ，
html{
font-size: 60px;
}
.container{
font-size: 16px;
}
h1{
font-size: 1rem;
}
效果👇
🚋 vw 單位
vw 代表 viewprot width（視口寬度），這意味著 vw 總是相對于根寬度的 1%，與父元素的寬度無關，所以，如果
1vw == 1%那么100vw == 100%視口寬度，
讓我們考慮以下示例，其中一個子項的寬度相對于父項的大小，而另一個子項的寬度相對于根，
.container{
width: 600px;
border: 2px solid black;
text-align: center;
font-size: 20px;
}
.box1{
width: 100%;
background: skyblue;
}
.box2{
width: 70vw;
background: pink;
}
效果👇
🛸 vh 單位
vh 代表 viewprot height （視口高度），如 vw 它也相對于根/檔案的 1% 高度，讓我們考慮以下示例，其中一個子級的高度與父級大小有關，而另一個子級的高度與根相關，
.container{
border: 2px solid;
font-size: 40px;
width: 800px;
height: 400px;
display: flex;
text-align: center;
margin: 0 auto;
}
.box1{
height: 100%;
width: 50%;
background: skyblue;
}
.box2{
height: 100vh;
background: pink;
width: 50%;
}
效果👇
🛬 wuhu ! 起飛 !
概括總結
🌟 px單位常用于邊框，
🌟 % 單位相對于相對父級的寬度，
🌟 em 單位相對于元素字體大小的邊距和填充 ，
🌟 rem 單位相對于根的字體大小 ，
🌟 vw 和 vh 表示相對于根的寬度和高度，
🌟 這些是 6 個 css 單元，它們最常用于使網站具有回應性，
我已經寫了很長一段時間的技術博客，并且主要通過CSDN發表，這是我的一篇 回應式網站的 CSS 單位教程，我喜歡通過文章分享技術與快樂，您可以訪問我的博客： https://haiyong.blog.csdn.net/ 以了解更多資訊，希望你們會喜歡！
💌 歡迎大家在評論區提出意見和建議！💌
如果你真的從這篇文章中學到了一些新東西，喜歡它，收藏它并與你的小伙伴分享，🤗最后，不要忘了?或📑支持一下哦，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/293001.html
標籤：其他
上一篇：大端模式、小端模式、高位元組序、低位元組序、MSB、LSB
下一篇：兩分鐘，幫你搞懂光纖接頭