使用rem适配不同屏幕的移动设备
- 1、px (pixel，像素)：是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI(Dots Per Inch，每英寸像素數)，在掃描打印時一般都有DPI可選。Windows系統默認是96dpi，Apple系統默認是72dpi。
- 2、em(相對長度單位，相對于當前對象內文本的字體尺寸)：是一個相對長度單位，最初是指字母M的寬度，故名em。現指的是字符寬度的倍數，用法類似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。
- 3、pt (point，磅)：是一個物理長度單位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
- 4、rem（root em，根em）：是CSS3新增的一個相對單位，這個單位引起了廣泛關注。這個單位與em有什么區別呢？區別在于使用rem為元素設定字體大小時，相對大小對比的是HTML根元素。這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。
2.開始進入rem教程
1.先設置header里面的meta標簽：
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">?
2.在header寫上<script>標簽
<script type="text/javascript">document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px'; </script>?
問題：為什么要設置Html的font-size？
答：這里是設置html標簽的font-size，上面概論紅色字寫的很清晰，頁面元素使用rem單位時，是相對于這個html標簽的font-size的大小為基礎的。
問題：為什么是clientWidth/640?為什么要乘以100？
答：
例如：設計稿寬度是640px，有一個元素設計稿上的寬度是50px，設備物理寬度是320px,那么我們在頁面上應該設置寬度為 width:50rem，相當于寬度是：50*（320/640）=25px；這里能正確算出在320px的設備上剛好占一半,其實可以想象為 rem=（320/640）。
一般瀏覽器的最小字體是12px，如果html的font-size=（320/640）px，相當于font-size=0.5px，那么這個數值就小于12px，會造成一些計算的錯誤，和一些奇怪的問題，*100后，font-size是50px，就可以解決這種字體小于12px的問題。
為了計算方便 我們后面把比率乘以了100，（320/640）*100，那么相對應這個元素在設置數值的時候就需要除以100了（50/100）,這樣可以保證最后出來的數值不變.
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
1.在iphone6下的情況，設備的物理像素是375px
轉載于:https://www.cnblogs.com/mo3408/p/11606786.html
總結
以上是生活随笔為你收集整理的使用rem适配不同屏幕的移动设备的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java使用Optional与Strea
- 下一篇： ATC打ABC142有感