本篇文章給大家分享的是有關(guān)使用Rem怎么實(shí)現(xiàn)自適應(yīng)布局，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)公司云計(jì)算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過(guò)13年的服務(wù)器租用、四川雅安電信機(jī)房、云服務(wù)器、網(wǎng)絡(luò)空間、網(wǎng)站系統(tǒng)開(kāi)發(fā)經(jīng)驗(yàn)，已先后獲得國(guó)家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專(zhuān)業(yè)提供云主機(jī)、網(wǎng)絡(luò)空間、域名注冊(cè)、VPS主機(jī)、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。

在移動(dòng)端我們一般會(huì)設(shè)置布局視口寬度=設(shè)備寬度，即內(nèi)容呈現(xiàn)的區(qū)域在設(shè)備屏幕內(nèi)。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

但不同設(shè)備的寬度不同，因而讓布局視口的寬度也不同。比如 iPhone 6 的布局視口寬度為 375， iPhone6 Plus 布局視口的寬度為 414。

對(duì)于給定的畫(huà)布寬 750 的視覺(jué)稿，如果在布局視口寬度為 375 的 iPhone 6 設(shè)備上呈現(xiàn)，我們可以將視覺(jué)稿中元素的像素值除以 2，代碼如下：

.box{
    width: 351px;
    height: 150px;
    margin-top: 40px;
    background: #F5A623;
}

那么在 iPhone 6 中的呈現(xiàn)如右圖，與左圖視覺(jué)稿布局一致。

但同樣的代碼，在  iPhone 6 Plus 中呈現(xiàn)的就不一樣了，兩側(cè)間距變大。因?yàn)?nbsp; iPhone 6 Plus 的布局視口比 iPhone 6 要寬，而矩形框的尺寸沒(méi)有變， 依然是 315 x 150。

對(duì)于給定的畫(huà)布寬 750 的視覺(jué)稿，如果在布局視口寬度為 414 的 iPhone 6 Plus 設(shè)備上呈現(xiàn)，我們可以將視覺(jué)稿中元素的像素值按比例除以 (750 / 414)，即:

.box{
    width: 387.5px;
    height: 165.6px;
    margin-top: 44.2px;
    background: #F5A623;
}

頁(yè)面呈現(xiàn)效果也可以跟視覺(jué)稿一樣了。

為了在不同設(shè)備寬度（不同視口寬度）的頁(yè)面中呈現(xiàn)效果跟視覺(jué)稿一樣，需要寫(xiě)不同的 CSS 像素值。 我們的訴求是希望能用同樣的 CSS 代碼在不同寬度的設(shè)備上展現(xiàn)效果與視覺(jué)稿相同，通俗的說(shuō)就是按照視覺(jué)稿中元素與畫(huà)布的尺寸比例在不同設(shè)備上等比縮放，從而達(dá)到在不同設(shè)備上自適應(yīng)的效果。

使用 Rem 布局解決自適應(yīng)問(wèn)題

如何用同一份 CSS 代碼，使元素尺寸隨著布局視口寬度的變化按視覺(jué)稿中的比例等比縮放？我們結(jié)合 CSS 中相對(duì)單位 rem 的特性，rem 單位的像素值是相對(duì)于根元素(HTML 元素) 的 font-size 的。例如：HTML 的 font-size 為 100px， 在 CSS 樣式中設(shè)置某一元素的寬度為 2rem， 那么此元素在頁(yè)面中的寬度為 200px。

根據(jù)元素在視覺(jué)稿中的比例等比縮放找到這樣一層關(guān)系：

視覺(jué)稿元素尺寸 / 視覺(jué)稿畫(huà)布寬度  
= (rem 值 * HTML 元素的 font-size) / 布局視口寬度 
= rem 值 * (HTML 元素的 font-size / 布局視口寬度)
= rem 值 / (布局視口寬度  /  HTML 元素的 font-size)

如果：

布局視口寬度  /  HTML 元素的 font-size = 定值 N

就可以用同一份 CSS 代碼實(shí)現(xiàn)在任何設(shè)備中自適應(yīng)。

rem 值 = N * (視覺(jué)稿元素尺寸 / 視覺(jué)稿畫(huà)布寬度 )

所以，我們只要確定一個(gè) N 值，再完成兩步，即可實(shí)現(xiàn)自適應(yīng)：

• 第 1 步：動(dòng)態(tài)設(shè)置 HTML 元素的 font-size = 布局視口寬度 / N

• 第 2 步：將視覺(jué)稿中導(dǎo)出的元素 CSS 像素值轉(zhuǎn)成 rem 單位: rem 值 = N * (視覺(jué)稿元素尺寸 / 視覺(jué)稿畫(huà)布寬度 )

假如您的視覺(jué)稿畫(huà)布寬度是 750，為了便于 rem 值的計(jì)算， 您可以選擇設(shè)置 N = 7.5， 這樣只需要將視覺(jué)稿中的尺寸值除以 100 就可以得到 rem 單位的 CSS 像素值。

以上就是使用Rem怎么實(shí)現(xiàn)自適應(yīng)布局，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：使用Rem怎么實(shí)現(xiàn)自適應(yīng)布局-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)地址：http://chinadenli.net/article46/dpighg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、小程序開(kāi)發(fā)、Google、網(wǎng)站維護(hù)、搜索引擎優(yōu)化、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)