溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下web開發(fā)中使用rem實(shí)現(xiàn)自適應(yīng)效果的案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
前言
作為一名前端工程師，我們不僅要會PC端開發(fā)，還要會移動(dòng)端開發(fā)，而且現(xiàn)在移動(dòng)端占據(jù)主要流量，所以掌握移動(dòng)端開發(fā)的技能更是必須的。
那么進(jìn)行移動(dòng)端的開發(fā)，什么是必須，我們想要的效果是什么？
自適應(yīng)。對，我們想要的效果應(yīng)該是網(wǎng)頁上的元素能隨著窗口大小的變化而跟著同比的變化。
假如我們拿到一張750px寬的設(shè)計(jì)圖，上面有一個(gè)元素是75px寬，當(dāng)這張頁面出現(xiàn)在只有540px寬的設(shè)備上，這個(gè)元素就得是54px寬。
如果你使用px這種固定的長度單位，在不同大小的設(shè)備上會出現(xiàn)什么情況，不用我說你也知道吧。
現(xiàn)在手機(jī)機(jī)型五花八門，主流手機(jī)iPhone6/7/8 4.7英寸、iPhone6/7/8 Plus 5.5英寸、iPhoneX 5.8英寸等。
那么如何讓這些機(jī)型不同大小不一致的手機(jī)呈現(xiàn)出我們想要的效果呢？
方案
解決移動(dòng)端適配問題其實(shí)有多種方案。
1.百分比
很容易就能想到百分比能實(shí)現(xiàn)自適應(yīng)，但百分比非常局限。
在一張網(wǎng)頁上，有一個(gè)元素占這個(gè)網(wǎng)頁寬度的一半，你很容易就想到width: 50%。
但這個(gè)元素如果出現(xiàn)在不知道距頁面左邊緣多少px的情況下，你一下子無法看出占多少百分比，這時(shí)候你就得去測量、去算占比，如果元素非常多的話，那就相當(dāng)麻煩了。
然而，使用百分比真正的弊端在于字體大小和元素高度。
字體大小是無法通過百分比實(shí)現(xiàn)自適應(yīng)的。
元素的高度也是一樣，一般移動(dòng)端的頁面是不知道高度的，可以隨著內(nèi)容無限下拉，元素的高度很難通過百分比去計(jì)算。
2.媒體查詢（@media）
使用多套CSS也可以實(shí)現(xiàn)移動(dòng)端自適應(yīng)。
但媒體查詢最適合的場景是一個(gè)網(wǎng)頁在PC端是一種呈現(xiàn)形式，在移動(dòng)端是另一種呈現(xiàn)形式。
如果純移動(dòng)端網(wǎng)頁（只考慮移動(dòng)設(shè)備不考慮PC設(shè)備）使用媒體查詢，面對不同機(jī)型，就會有多套CSS，代碼相當(dāng)冗長。
3.vw
vw是一種CSS長度單位，是相對單位。
表示相對視口寬度（Viewport Width），1vw = 1% * 視口寬度，100vw等于屏幕寬度。
它的自適應(yīng)效果非常好，但是目前它的兼容性不好，特別是在移動(dòng)端瀏覽器有很多兼容問題的環(huán)境下，這里顯得特別不合適，所以不推薦。
4.rem
rem也是一種CSS長度單位，也是相對單位。
它相對于根元素（<html>）下的font-size的值，1rem = html下font-size的值。
這個(gè)單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。
目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。
viewport
在真正使用之前，我必須介紹一下<meta name="viewport">這個(gè)元素標(biāo)簽。
想必，在每一個(gè)移動(dòng)端頁面，都有這么一段代碼：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
這段代碼的意思是讓視口（viewport）的寬度等于設(shè)備的寬度，初始縮放比例為1，最小縮放比例為1，最大縮放比例為1，禁止用戶縮放。content的內(nèi)容是可以配置的。
移動(dòng)端瀏覽器會把網(wǎng)頁放在一個(gè)viewport中，
默認(rèn)情況下，移動(dòng)設(shè)備上的viewport是大于瀏覽器可視區(qū)域的，
所以一般會出現(xiàn)滾動(dòng)條，這是為了能在移動(dòng)設(shè)備上正常顯示那些為PC端設(shè)計(jì)的網(wǎng)站，移動(dòng)設(shè)備上的瀏覽器都會把自己默認(rèn)的viewport設(shè)為980px或其他值。
像下面這樣，在還沒有寫<meta>的情形，模擬手機(jī)瀏覽器：
所以我們必須使用<meta>元素來限制viewport的大小和縮放，一般我們都是等于設(shè)備的寬度。
必須使用<meta>元素還有一點(diǎn)是和rem相關(guān)的。
上面說過，rem是一種相對單位，相對于html元素下的font-size的值。
如果html元素下的font-size的值能隨著頁面的大小變化而變化，那么rem也能做出相應(yīng)的變化。
所以，如果沒有加上<meta>元素標(biāo)簽這一段代碼，在不同機(jī)型大小下，html元素下的font-size的值是一直不變的，因?yàn)関iewport不變，一直保持980px。
使用
“假如我們拿到一張750px寬的設(shè)計(jì)圖，上面有一個(gè)元素是75px寬，當(dāng)這張頁面出現(xiàn)在只有540px寬的設(shè)備上，這個(gè)元素就得是54px寬?！?/p>
我們說過達(dá)到這種移動(dòng)端自適應(yīng)的效果最好的方法是使用rem單位。
因?yàn)?rem = html下font-size的值，如果html下font-size的值能隨著頁面的大小改變而改變，我們在代碼寫的rem就不用改變。
先約定1rem = 50px，如750px頁面，75px元素，那么元素的width我們在代碼中設(shè)置的值就是1.5rem。當(dāng)頁面大小變成540px，1rem = 36px，代碼中元素的寬度是1.5rem，所以元素現(xiàn)在在頁面的寬度是54px。
好，現(xiàn)在我們就寫一段代碼來讓html下font-size的值能隨著頁面的大小改變而改變，代碼如下：
(function(doc, win){ var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return;
docEl.style.fontSize = 50 * (clientWidth / 750) + 'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);實(shí)例
假設(shè)我們的設(shè)計(jì)師給我們一張?jiān)O(shè)計(jì)圖（嗯，沒錯(cuò)！就長這個(gè)樣子）
這是一張 750*1334 px的設(shè)計(jì)圖，在設(shè)計(jì)圖上量得這個(gè)黃色的矩形的長是330px，寬是190px。
因?yàn)橐话阍O(shè)計(jì)圖都是按照iPhone6的二倍圖進(jìn)行設(shè)計(jì)，所以iPhone6的實(shí)際尺寸是 375*667 px，所以黃色矩形的長應(yīng)是165px，寬是95px，
而且PC端瀏覽器調(diào)試手機(jī)模式下iPhone6的尺寸也是 375*667 px。
我們約定1rem = 50px，所以黃色矩形 width: 3.3rem; height: 1.9rem;
我們的設(shè)置html下font-size的值的js代碼為
// 50是1rem等價(jià)于多少px，375是設(shè)計(jì)稿的寬度，這里我們除以了2docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
效果：
源碼
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>rem</title>
<style>
p {
width: 3.3rem;
height: 1.9rem;
background-color: yellow;
}
</style></head><body>
<p></p>
<script>
(function(doc, win){ var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return;
docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window); </script></body></html>額外概念
在為寫這篇博客上網(wǎng)查資料的過程中，總結(jié)了幾個(gè)與移動(dòng)端開發(fā)相關(guān)的概念。
1.物理像素physical pixel
一個(gè)物理像素是顯示器上最小的物理顯示單位。
2.設(shè)備獨(dú)立像素（也叫密度無關(guān)像素、css像素、邏輯像素）
device independent pixels（dips）
一種物理測量單位，基于計(jì)算機(jī)控制的坐標(biāo)系統(tǒng)和抽象像素（虛擬像素），由底層系統(tǒng)的程序使用，轉(zhuǎn)換為物理像素的應(yīng)用。
3.設(shè)備像素比device pixel ratio（dpr）
定義了物理像素和設(shè)備獨(dú)立像素的對應(yīng)關(guān)系。
公式：設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素 （該值也是平時(shí)手機(jī)說的幾倍屏幾倍屏的值）
4.分辨率
比如圖片是由1280個(gè)像素* 720個(gè)像素組成。
5.PPI（每英寸所擁有的像素）
PPI是用來描述屏幕的像素顯示密度。
6.DPI（每英寸打印的點(diǎn)數(shù)）
DPI表示每英寸打印的點(diǎn)數(shù)。
以上是web開發(fā)中使用rem實(shí)現(xiàn)自適應(yīng)效果的案例的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼