移動(dòng)web端屏幕適配rem的示例分析

這篇文章主要介紹了移動(dòng)web端屏幕適配rem的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司成立于2013年，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元常山做網(wǎng)站,已為上家服務(wù),為常山各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

rem 介紹

rem 表示根元素（<html>）的 font-size 的大小。即如果根元素的 font-size 大小為 14px，則 1rem = 14px

rem 適配移動(dòng) web 端

適配效果

在不同尺寸的屏幕下，同一個(gè)元素的大小看起來(lái)不是一樣大的，但是它們所占屏幕寬度的比例是一樣的。

代碼

// 在 html 文件的 head 標(biāo)簽中
<script type="text/javascript">
  (function(){
    var html = document.documentElement;
    // 獲取屏幕寬度（px）
    var hWidth = html.getBoundingClientRect().width;
    // 設(shè)置 html 標(biāo)簽的 font-size 大小為 hWidth/15
    html.style.fontSize = hWidth/15 + 'px';
  })()
</script>

// 在 less 中
/* 定義變量@r：750/15 */
@r:50rem; 
p {
  width: 100/@r;
  height: 200/@r;
}

javascript 代碼

首先，我們將屏幕的 1/15 大?。╬x）復(fù)制給 html 標(biāo)簽的 font-size 屬性。此時(shí)，在任何尺寸的屏幕上，屏幕尺寸（px）的 1/15 px 都等于 1rem 的大小。即：在任何尺寸的屏幕上，只要給元素設(shè)置值相同的 rem，則在所有尺寸的屏幕上該元素所占屏幕寬度的比例是一樣的，所占比例一樣，就適配了所有尺寸的屏幕。

less 代碼

現(xiàn)在只需要將設(shè)計(jì)稿中元素的 px 單位轉(zhuǎn)換為 rem 單位。

所以，這個(gè)時(shí)候，我們可以把設(shè)計(jì)稿也當(dāng)成一個(gè)具有一定尺寸的手機(jī)屏幕。
在我這個(gè)例子中，設(shè)計(jì)稿的寬度為 750px。

所以，750/15 = 50px，即在設(shè)計(jì)稿這樣尺寸的手機(jī)屏幕中，1rem = 50px。

然后，在 less 代碼中，我們定義一個(gè)變量 @r。

量得 p 的寬度為 100px，因?yàn)樵谠O(shè)計(jì)稿這樣尺寸的屏幕中，1rem = 50px，所以該 p 的 rem 的值為：100/50 rem，即 100/@r。

量得 p 的高度為 200px，因?yàn)樵谠O(shè)計(jì)稿這樣尺寸的屏幕中，1rem = 50px，所以該 p 的 rem 的值為：200/50 rem，即 200/@r。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“移動(dòng)web端屏幕適配rem的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

本文題目：移動(dòng)web端屏幕適配rem的示例分析
標(biāo)題網(wǎng)址：http://jinyejixie.com/article28/iepdcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、用戶(hù)體驗(yàn)、標(biāo)簽優(yōu)化、網(wǎng)站改版、軟件開(kāi)發(fā)、網(wǎng)站內(nèi)鏈

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

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

移動(dòng)web端屏幕適配rem的示例分析