等比縮放之自適應神器——css3的rem
阿新 • • 發佈：2018-12-23
1.rem簡介
rem是CSS3中新增加的一個單位值，他和em單位一樣，都是一個相對單位。不同的是em是相對於元素的父元素的font-size進行計算；rem是相對於根元素html的font-size進行計算。這樣一來rem就繞開了複雜的層級關係，實現了類似於em單位的功能。
2.rem相容性
rem是CSS3新引進來的一個度量單位，大家心裡肯定會覺得心灰意冷呀，擔心瀏覽器的支援情況。其實大家不用害怕，你可能會驚訝，支援的瀏覽器還是蠻多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可憐的IE6-8無法支援。
不過使用單位設定字型，可不能完全不考慮IE了，如果你想使用這個REM，但也想相容IE下的效果，可你可考慮“px”和“rem”一起使用，用"px"來實現IE6-8下的效果，然後使用“Rem”來實現代瀏覽器的效果。就讓IE6-8不能隨文字的改變而改變吧，誰讓這個Ie6-8這麼老呢？可以針對低版本的IE瀏覽器做一定的處理：
[javascript] view plain copy
- html { font-size: 62.5%; }
- body { font-size: 14px; font-size: 1.4rem; } /* =14px */
- h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
這樣一來解決了IE低版本的不能相容的問題，但生出另一個不足地方，就是增加了程式碼量。必竟魚和熊掌很多時候不能兼得嘛。
3.rem使用
前面說了em是相對於其父元素來設定字型大小的，這樣就會存在一個問題，進行任何元素設定，都有可能需要知道他父元素的大小，在我們多次使用時，就會帶來無法預知的錯誤風險。而rem是相對於根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考值，這個參考值設定為多少，完全可以根據您自己的需求來定。
假設就使用瀏覽器預設的字號16px，來看一些px單位與rem之間的轉換關係：
如果你要設定一個不同的值，那麼需要在根元素<html>
<html>元素中設定font-size值為62.5%:
[javascript] view plain copy
- html {
- font-size: 62.5%; /* 10 ÷ 16 × 100% = 62.5% */
- }
相當於在<html>中設定font-size為10px。
4.例子：圖片文字等等比縮放自適應
- <!DOCTYPE HTML>
- <html>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <script src="jquery-1.7.1.min.js"></script>
- <title>home</title>
- <style>
- body {
- margin: 0;
- padding: 0;
- border: 0;
- background: #fd3b36;
- font-family: Microsoft Yahei, Arial, sans-serif;
- overflow-x: hidden;
- }
- #mainpage {
- background: url(home.png) no-repeat;
- background-size: 100%;
- width: 6.4rem;
- height: 11.36rem;
- }
- #content {
- width: 5.5rem;
- font-size: 0.26rem;
- margin: 0 auto;
- padding-top: 4.4rem;
- color: #fff;
- line-height: 0.38rem;
- }
- #btn {
- text-align: center;
- }
- #btn img {
- width: 3.66rem;
- height: 0.96rem;
- margin-top: 0.64rem;
- }
- </style>
- <title>活動首頁</title>
- <body>
- <div id="mainpage">
- <div id="content">在這個闔家團圓、祝福新年的節日，祝大家新年快樂，萬事大吉，平平安安，羊年行大運，發大財。</div>
- <div id="btn">
- <img src="btn.png">
- </div>
- </div>
- <script>
- /*將根元素字號大小設定為：屏寬與圖寬的比；
- 由於chrom對10px以下的字不再縮小，而且手機屏
- 都比較小，所以作為預設字型大小又乘了100，這樣
- 計算其他元素大小時，量出圖上大小再除以100就可以了*/
- function defaultfont() {
- var sw = $(window).width();
- var pw = 640;
- var f = 100*sw/pw;
- $('html').css('font-size', f+'px');
- }
- /*之所以要延時100ms再呼叫這個函式是因為
- 如果不這樣螢幕寬度載入會有誤差*/
- defaultfont();
- setTimeout(function(){
- defaultfont();
- }, 100);
- </script>
- </body>
- </html>