首頁 >web前端 >css教學 >CSS單位總結（如rem、px、em、vw、vh、vm ）

CSS單位總結（如rem、px、em、vw、vh、vm ）

青灯夜游轉載: 2018-10-10 16:14:433811瀏覽

本文帶給大家CSS單位總結（如rem、px、em、vw、vh、vm ），介紹一下這些單位的差異。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

px：像素（pixel）相對長度單位，，是相對於螢幕顯示器解析度而言的；

em：em的數值並不是固定的，會整合父級元素的字體大小；

　注意：　　

　1.body選擇其中宣告Font-size=62.5%;

　2.將原來的px數值除以10，然後換上em作為單位；

　3.重新計算那些被放大的字體的em數值。避免字體大小的重複聲明。

任何瀏覽器預設字體大小都是16px，所有未經調整的瀏覽器都符合1em=16px，南無0.75em=12px，10px=0.625em。為了簡化Font-size的換算，需要在css中的body選擇器中宣告Font-size=62.5%，這就使em的值變成16px*62.5%=10px，這樣12px就是1.2em，10px就是1em，也就是將原來的px數值除以10換上em的單位就可以了。

rem：相對單位，（root em 即rem），使用rem為單位設定字體大小時，是相對於HTML根元素的大小，可透過該根元素就成比例的修改調整所有字體大小，一般用的時候都是寫在body或html上面，例：

body{font-size:625%;}

也就是1rem=100px;

不過在寫項目的時候最好搭配媒體查詢一起，例如：　　　

　　html{font-size:10px}　　　　　　//10px==62.5%

　　@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

　　@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

　　@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

　　@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

　　@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

　　@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

　　@media screen and (min-width:800px){html{font-size:25px}}

vw：視口的最大寬度，1vw=視口寬度的百分之一；

#vh：視口得最大高度，1vh=視口高度的百分之一；

vmin/vm：相對於視口的寬度或高度中較小的那個。其中最小的被均分成100單位的vmin（即vm）。

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請訪問 CSS影片教學！

CSS單位總結（如rem、px、em、vw、vh、vm ）

相關文章