一 什么是rem？

多端合一響應(yīng)式網(wǎng)站:PC+平板+手機(jī),同一后臺修改數(shù)據(jù)多端同步更新提交您的需求,獲取網(wǎng)站建設(shè)與營銷策劃方案報價,我們會在1小時內(nèi)與您聯(lián)系!

“font size of the root element 這是w3c的定義

也就是說是相對于根節(jié)點（html節(jié)點）的字體大小的單位。

目前主流的瀏覽器基本都支持rem這個單位，大部份的默認(rèn)字體單位是16px。

圖片摘自 http://caniuse.mojijs.com/Home/Html/item/key/rem/index.html

 二 簡單應(yīng)用。

既然確定在各個主流瀏覽器都能食用的話，我們就放心大膽在移動端進(jìn)行開發(fā)了。

舉個例子說明

-size:62.5%; --size:1

由于我們選定的瀏覽器默認(rèn)字體為16px，將根節(jié)點html設(shè)置為 font-size:62.5%;，這樣換算下來的話 1rem = 10px ，在單位的計算方便將會方便很多。

三 響應(yīng)式使用。

在實際開發(fā)過程中，不論是移動端還是pc端都要兼容各種分辨率的設(shè)備，所以實際尺寸是要響應(yīng)式的。

假如說上個例子的62.5%是基于iPhone5的尺寸，也就是說是320*568的尺寸

如果是ipad尺寸的時候，只要相應(yīng)的擴(kuò)大倍數(shù)即可

@media only screen and (min-width: 768px){
    html {
        font-size: 150%!important;
    }
}

注：利用媒體查詢，可根據(jù)自己的實際需要，設(shè)定不同的尺寸。

四 rem的進(jìn)階使用

先甩上地址 ht  tps://g  ithub.  com/am fe/lib-flexible

說起移動端適配，怎么能少 了淘寶的移動端~

這個教程足夠詳細(xì)了（如果絕對還不夠的話，可以參考下這個地址  h  ttp  s://gi  thu  b.com/am  fe/article/issues/17 ，其中還有現(xiàn)成的demo）。

在引入flexible.js過后，關(guān)于px轉(zhuǎn)成rem的方法：

在sublime中是有直接轉(zhuǎn)換的插件，有興趣的童鞋可以去研究下。

在sass/less預(yù)編譯下也可快速計算當(dāng)前尺寸。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁題目：淺談移動端rem的用法-創(chuàng)新互聯(lián)
URL鏈接：http://chinadenli.net/article20/epejo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、用戶體驗、建站公司、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(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)