一步步教你使用rem適配不一樣屏幕的移動設備

時間 2019-11-25

標籤步步使用 rem 適配不一樣屏幕移動設備简体版

原文原文鏈接

1.先說說幾個前端經常使用的幾個單位的概論：

一、px (pixel，像素)：是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，若是px要換算成物理長度，須要指定精度DPI(Dots Per Inch，每英寸像素數)，在掃描打印時通常都有DPI可選。Windows系統默認是96dpi，Apple系統默認是72dpi。
二、em(相對長度單位，相對於當前對象內文本的字體尺寸)：是一個相對長度單位，最初是指字母M的寬度，故名em。現指的是字符寬度的倍數，用法相似百分比，如：0.8em, 1.2em,2em等。一般1em=16px。
三、pt (point，磅)：是一個物理長度單位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
四、rem（root em，根em）：是CSS3新增的一個相對單位，這個單位引發了普遍關注。這個單位與em有什麼區別呢？區別在於使用rem爲元素設定字體大小時，相對大小對比的是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

2.開始進入rem教程

1.先設置header裏面的meta標籤：javascript

1 <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

2.在header寫上<script>標籤html

1 <script type="text/javascript">
2 　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
3 </script>

問題：爲何要設置Html的font-size？前端

答：這裏是設置html標籤的font-size，上面概論紅色字寫的很清晰，頁面元素使用rem單位時，是相對於這個html標籤的font-size的大小爲基礎的。java

問題：爲何是clientWidth/640?爲何要乘以100？瀏覽器

答：iphone

1.是由於這裏是做爲一個基礎數值，換個方向去想，這裏先不乘以100以避免產生誤解。字體

例如：設計稿寬度是640px，有一個元素設計稿上的寬度是50px，設備物理寬度是320px,那麼咱們在頁面上應該設置寬度爲 width:50rem，至關於寬度是：50*（320/640）=25px；這裏能正確算出在320px的設備上恰好佔一半,其實能夠想象爲 rem=（320/640）。spa

2.通常瀏覽器的最小字體是12px，若是html的font-size=（320/640）px，至關於font-size=0.5px，那麼這個數值就小於12px，會形成一些計算的錯誤，和一些奇怪的問題，*100後，font-size是50px，就能夠解決這種字體小於12px的問題。設計

3. 爲了計算方便咱們後面把比率乘以了100，（320/640）*100，那麼相對應這個元素在設置數值的時候就須要除以100了（50/100）,這樣能夠保證最後出來的數值不變.code

3.設置好html的font-size,那麼咱們下面就能夠開始編寫根據設計稿的例子了。

設計稿是640px，有一個紅色盒子寬高都是320px，裏面的文字是32px，那麼下面是這個例子的代碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
    <script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
    </script>
</head>
<body style="margin: 0 ;padding: 0;font-size: 0.32rem">
<div style="width: 3.2rem;height: 3.2rem ;background: red">
    <span>danny.xie</span>
</div>
</body>
</html>

1.在iphone5下的狀況，設備的物理像素是320px