px,em,rem,vw单位在网页和移动端的应用
px：
是網(wǎng)頁設(shè)計(jì)中最常用的單位，然而1px到底是多大長，恐怕沒有人能回答上來
它用來表示屏幕設(shè)備物理上能顯示的最小的一個(gè)點(diǎn)，這個(gè)點(diǎn)不是固定寬度的，不同設(shè)備上點(diǎn)的長度、比例有可能會(huì)不同。
假設(shè)：你現(xiàn)在用的顯示器上1px寬=1毫米，但我用的顯示器1px寬=兩毫米，那么你定義一個(gè)div寬度為100px，你顯示器上看這個(gè)div是10厘米，我顯示器上看是20厘米。另外一個(gè)px點(diǎn)的長度不一定是1:1的正方形，有的設(shè)備上長度比是不一樣的。
更多px信息點(diǎn)此博客。?px的兼容性：需要注意的是谷歌瀏覽器最小可以識別12px大小的字體，更多解決方案可以參看文檔
?
em:
相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。(引自CSS2.0手冊)
任意瀏覽器的默認(rèn)字體高都是16px。
所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。此時(shí)1.25em=16px*1.25=20px;
如果人為的把body里面定義font-size:12px; 此刻1em=12px，1.25em=12px*1.25=15px;
如果我們把body設(shè)置font-size:62.5%，即16px*62.5%=10px,此時(shí)1em=10px,1.25em=12.5px；
這樣更好的有利于我們計(jì)算，將原來的px數(shù)值除以10，然后換上em單位即可，em可以兼容多瀏覽器
em特征：1、em值并不固定；2、em會(huì)繼承父級元素的字體大小。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>font</title><style type="text/css">body{ font-size: 16px;}div{ font-size: 1.25em;}div p{ font-size: 1.25em}</style> </head> <body><div>這里面字體20px;<p>這里面的字體大小25px</p></div> </body> </html>這里可以看出em的繼承特性，同樣設(shè)置1.25em，div里的字體按照16px*1.25=20px; p里面的字體按照20px*1.25=25px;單位一致，顯示不同大小；
這里是個(gè)em的換算工具?
?
rem：
rem是CSS3新增的一個(gè)相對單位（root em，根em），這個(gè)單位引起了廣泛關(guān)注。這個(gè)單位與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對大小，但相對的只是HTML根元素。這個(gè)單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應(yīng)對方法也很簡單，就是多寫一個(gè)絕對單位的聲明。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小，rem的兼容性和em一樣
?
VW:
vw是可視區(qū)寬度單位。1vw等于可視區(qū)寬度的百分之一。
100vw=相對于視窗寬度
100vh=相對于視窗高度
vm:相對于視窗的寬度或高度，取決于哪個(gè)更小； vmin:vw和vh中較小的那個(gè)；vmax:vw和vh中較大的那個(gè)
vw單位跟百分比很相似，不同的是vw的值對所有的元素都一樣，與他們父元素或父元素的寬度無關(guān)。有點(diǎn)像rem單位那樣總是相對于根元素。
vw的兼容性現(xiàn)代瀏覽器都支持，但古董瀏覽器還是說下
轉(zhuǎn)載于:https://www.cnblogs.com/yangjie-space/p/4817738.html
總結(jié)
以上是生活随笔為你收集整理的px,em,rem,vw单位在网页和移动端的应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： maven中pom.xml中的scope
- 下一篇： html常用标签（form标签）