整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
端開發中長度單位有很多，最為常用和熟知的肯定就是px了，隨著前端的不斷發展，em和rem也越來越普及，只用px一把梭的時代早已成為過去。是px過時了嗎？如果對這些單位的使用場景不夠了解，可能就會拿著一個rem從頭梭到尾了。本篇我們來好好梳理一下css中的長度單位以及它們的使用場景，我們要在合適的場景使用合適的單位。
px是像素點單位，與之線性相關的單位有mm（毫米）、cm（厘米）、in（英寸）、pt（點，印刷術語，1/72英寸）、pc（派卡，印刷術語，12點）。
1in = 25.4mm = 2.54cm = 6pc = 72pt = 96pxem是相對長度單位，適合基于特定的字號進行排版。1em=當前元素的字號，其準確值取決于作用的元素。
.padded {
font-size: 16px;
padding: 1rem;
}上面的代碼設置了元素的內邊距為16px。最終瀏覽器會根據相對單位計算出絕對值。
使用em來設置padding、height、width、border-radius很合適，當前元素如果繼承了不同的字號，響應的內邊距、寬高也會自動隨之縮放。
需要注意的是，如果使用em定義元素的字號，em的表現會稍有不同。上面提到，當前元素的字號決定了1em的值，但是，如果聲明font-size：1.2em，該元素的字號肯定不能等于自己的1.2倍。實際上，此時font-size是根據當前元素繼承的字號來計算的。
em示例
上圖可以看到，p標簽中的字號是1.2*16=19.2px，font-size是根據繼承的字號計算的。
em需要注意的就在于此，同時用它指定一個元素的字號和其他屬性時，瀏覽器必須先計算字號，然后使用這個計算值算出其余的屬性值。
另外，當用em來指定多重嵌套的元素的字號時，就會產生意外的結果，內嵌的元素會一直繼承上級的字號，導致要么嵌套字號越來越大，要么越來越小。
rem和em很像，其實和em的理念很像，都是相對單位，rem中的r是root，顧名思義，rem是相對一個root元素（一般以html標簽作為根元素）計算值的，不管在文檔的什么位置。
rem結合了px和em的優先，既保留了相對單位的優勢，又簡單易用可控。那只用rem行嗎？行，也不行。如果你只了解習慣這一個單位，就要充分發揮rem的優勢，全站梭到底也沒什么不行的。但是如果你想寫出簡單好看的css代碼，在不同的場景下使用適當的單位會讓你和你的隊友少趟許多的坑。
一般情況下，我會使用rem設置字號，用px設置邊框、用em來設置其他大部分的屬性，尤其是內邊距、外邊距、圓角等。這樣字號是可預測的，同時還能在其他因素改變元素字號時，借助em縮放內外邊距。你覺得呢？
我們先介紹一下概念：
視口：瀏覽器窗口里網頁可見部分的邊框區域，不包括瀏覽器的地址欄、工具欄、狀態欄。
vh：視口高度的1/100
vw：視口寬度的1/100
vmin：視口寬、高中較小的一方的1/100
vmax：視口寬、高中較大的一方的1/100
從定義上，相信小伙伴們已經明白了視口單位的用法。我來介紹相對視口單位的一個比較特別的用途：設置字號。誒？之前不是說設置字號用rem嗎？用視口單位能有什么特別的呢？
用rem設置字號的時候，為了適配不同的屏幕大小，免不了要使用@media根據不同的屏幕設置根元素的字號大小，有一個小小的問題是，如果動態去調整瀏覽器的寬度，達到設置的斷點時，一定程度會導致頁面的字體突然變大或縮小。但是，如果是使用vw來設置字號呢？頁面的字號是不是就不會突然的變化？會很平滑？
當然了，這種用法在實際應用中推廣的程度不是特別高，有些是因為瀏覽器支持的問題，有些是因為沒必要因為這么一點點的優化，而放棄心愛的rem。
今天所寫的內容主要是幫大家回顧一下css單位的用途及場景，還有一些單位（如fr）還沒有提及，將會在后面的文章中結合別的屬性寫。各種單位的存在一定都有各自的特長和適合的場景，偶爾打開一下思路，也許能有更好的解決方案。大家有想和我分享的內容嗎？感謝評論關注哦！
m參考該元素的字體大小而定
rem->root 參考根元素(html)的字體大小, html默認字體的大小: 14px
使用rem單位開發移動端頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 15rem;
height: 100px;
background-color: red;
}
</style>
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<div></div>
<script type="text/javascript">
//獲取dpr
var dpr = window.devicePixelRatio;
//獲取縮放比
var scale = 1 / dpr;
//重寫寫入meta標簽
document.write('<meta name="viewport" content="width=device-width,initial-scale='+scale+'" />');
//獲取設備寬度(分辨率)
var w = document.documentElement.clientWidth;
//獲取html
var html = document.getElementsByTagName("html")[0];
html.style.fontSize = w / 15 + "px";
</script>
</body>
</html>vw
css3新單位，viewpoint width的縮寫, 視窗寬度, 1vw等于視窗寬度的1%。
舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。
vh
css3新單位, viewpoint height的縮寫, 視窗高度, 1vh等于視窗高度的1%。
舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。
vm
css3新單位, 相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vm
舉個例子：瀏覽器高度900px, 寬度1200px, 取最小的瀏覽器高度, 1 vm = 900px/100 = 9 px。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*html,body{
height: 100%;
}*/
div{
width: 100px;
/*height: 100%;*/
height: 50vw;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>em 是一個很早就出現的單位, IE6 都可以兼容。但是 rem 是 CSS3 的屬性, 使用的時候要注意它的兼容性問題。目前 rem 通常應用在移動端的 WEB 開發上。
Rem 適配的優點： Rem 的參考值只有一個, 就是 HTML 字體大小, 所以不會像百分比適配那樣要明確參考誰。
Rem 使用的范圍比較廣, 元素的高度寬度、border 寬度、字號大小、間距和偏移量等都可以用 rem 做單位 Rem 適配的時候不需要做多套樣式, 可以直接按比例改變 HTML字體的大小。
Rem 適配的缺點： Rem 是 CSS3 的屬性, 只有比較新的瀏覽器上可以使用, 一般都是用在移動端。目前大廠的 H5 頁面, 基本都在使用 Rem 方式做屏幕適配了。
Rem 最后換算出來的值還是 px, 所以對于按比例分配空間這種需求是沒法滿足的, 需要和其他適配方式混合使用。
<html>
<head>
<title>這是網頁標題</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="keywords" content="這是關鍵字"/>
<link href="css文件路徑" rel="stylesheet"/>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>
</body>
</html>標簽 | 含義 | 常用屬性 |
a | 超鏈接 | href / target / title |
img | 圖片 | src / alt / title / width / heiht |
h1-h6 | ||
p | ||
br | ||
hr | ||
em | ||
strong | ||
i | ||
span | ||
div |
ID | CLASS | 標簽 |
100 | 10 | 1 |
樣式 | 含義 | 屬性值 |
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
