平時寫pc端頁面時，一般是px作為單位，遇到一些比較複雜的需要定位的也會夾雜使用百分比;但是在移動端時候px很容易布局就會亂，如果使用的是相對單位比如 em，rem
下面就說他們之間的區別
rem與em都是相對單位，我們使用它們的目的就是為了適應各種手機螢幕。
rem是根據html根節點來計算的，而em是繼承父元素的字型。比如下面乙個demo
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width,initial-scale=1,user-scalable=no"
>
>
test remtitle
>
>
html
body
.em,
.rem
.em span
.rem span
style
>
head
>
>
class
="em"
>
>
font-size使用emspan
>
div>
class
="rem"
>
>
font-size使用remspan
>
div>
body
>
html
>
第乙個span繼承了它的父元素div的大小，所以是14px,第二個span是通過html來計算的，所以是40px;
通過這個簡單的例子我們得知上面的結論是正確的。所以我們可以通過下面這種比例來對不同的手機螢幕做適配。
px/rem = 基值(em指的是自己元素上的font-size的值，rem指的是html中font-size的值）
pxrem
基數8px
0.5rem
16px
10px
0.625rem
16px
12px
0.75rem
16px
13px
0.8125rem
16px
14px
0.875rem
16px
16px
1rem
16px
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width,initial-scale=1,user-scalable=no"
>
>
test remtitle
>
>
html
.rem span
style
>
head
>
>
class
="rem"
>
>
font-size使用emspan
>
div>
body
>
css百分比定位和百分比尺寸
只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素，無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素，如果沒有則相對於視窗。可以...
CSS百分比單位總結
css中的很多地方都是可以使用百分比單位的，之前一直理所當然的認為百分比就是相對於容器的寬高設定的，後來在自己實現垂直居中的多種寫法時，才意識到這個問題，遂收集資料進行整理。相對於容器的寬度的 相對於content box寬度 width max width min width margin pad...
寬度百分比單位的轉換公式
目標寬度 上下文寬度 結果 比例寬度 當前元素的畫素寬度 當前元素的父元素的畫素寬度 當前元素的百分比寬度 例如 原css wrapper header aside section wrapper header aside section 百分比寬度css wrapper 指定外圍寬度，數值隨意 h...