今天小編給大家分享的是css使用Rem布局實現(xiàn)自適應效果的教程，相信很多人都不太了解，為了讓大家更加了解css使用Rem布局實現(xiàn)自適應效果的教程，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會有所收獲的哦。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：國際域名空間、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設、丹棱網(wǎng)站維護、網(wǎng)站推廣。

為什么要自適應？

比如，對于一個移動端頁面，設計師給的視覺稿畫布寬 750，視覺稿中的一個黃色區(qū)塊的尺寸是 702 x 300，并在畫板中居中。我們希望在任何一個設備中的呈現(xiàn)比例都與視覺稿中一樣，根據(jù)布局視口寬度等比縮放。

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

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

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

（相關(guān)視頻教程推薦：css視頻教程）

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

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

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

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

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

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

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

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

使用 Rem 布局解決自適應問題

如何用同一份 CSS 代碼，使元素尺寸隨著布局視口寬度的變化按視覺稿中的比例等比縮放？

我們結(jié)合 CSS 中相對單位 rem 的特性，rem 單位的像素值是相對于根元素(HTML 元素) 的 font-size 的。例如：HTML 的 font-size 為 100px， 在 CSS 樣式中設置某一元素的寬度為 2rem， 那么此元素在頁面中的寬度為 200px。

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

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

如果：

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

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

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

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

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

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

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

關(guān)于css使用Rem布局實現(xiàn)自適應效果的教程就分享到這里了，當然并不止以上和大家分析的辦法，不過小編可以保證其準確性是絕對沒問題的。希望以上內(nèi)容可以對大家有一定的參考價值，可以學以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。

文章名稱：css使用Rem布局實現(xiàn)自適應效果的教程
URL地址：http://www.rwnh.cn/article32/jeessc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、外貿(mào)建站、微信小程序、虛擬主機、App設計、做網(wǎng)站

廣告

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