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