移動端px和rem的換算

看根元素html裡面設定的font-size是多少（50）px，即認為1rem為多少（50）畫素

rem的優點是所有的元素大小都是乙個倍數，相對於根元素的倍數，所以只需要修改根元素，所有的元素都可以變化。可以適應不同的裝置解析度。

缺點是ie6、ie7、ie8不支援這個標籤。

指定了 1rem為50px

如果設計圖為750px，乙個div高為64px，手機裡實際應該為32px，

用rem表示就是32px/?rem = 50px/1rem，即：32/50等於0.64rem

方便計算就直接：64px的為0.64rem，即縮小100倍

1rem等於多少px呢？

1rem等於html根元素設定的font-size的px值，假如我們在css裡面設定下面的css：

html

那麼後面的css裡面的rem值則是以這個14來換算，例如設定乙個div寬度為3rem,高度為2.5rem.則它換算成px為width:3乘以14=42px，height:2.5乘以14=35px，

同理，假如乙個設計稿為寬度42px,高度為35px，則換成成rem，則是42/14=3rem，35/14=2.5rem。

（如果設計圖為350px，乙個div高為64px，手機裡也是64px，

用rem表示就是64px/?rem = 50px/1rem，即：64/50等於1.28rem

方便計算就直接：64px的為1.28rem，即縮小50倍）

之後碰到效果圖px轉換為rem的，就除以根元素設定的多少（50）px，碰到是rem換算成px的，就乘以根元素設定的多少（50）px

如果你沒有在根元素指定參照值，那瀏覽器預設就是 1rem 為 16px，如果指定了值假設為 20px，那 1rem 就為 20px。在根元素中定義了乙個基本字型大小為62.5%（也就是10px。設定這個值主要方便計算，如果沒有設定，將是以「16px」為基準）

以下不建議設定

html body

h1

有些瀏覽器不支援 12px 以下的字型大小，html 設定成 62.5%，或者 10px 時，已經小於12px了。所以，記住一點：如果要使用 rem 單位，html 的字型預設大小必須設定為 12px 或以上才行。