px和rem之間的轉(zhuǎn)化及sublime中插件cssrem的用法

一矿酵、轉(zhuǎn)化原理

屏幕寬度 (clientWidth ) / 設(shè)計(jì)稿寬度(ddesignWidth) = 具體元素在css中的寬度(rem) / 設(shè)計(jì)稿中的寬度(px)
1rem = html中設(shè)置的字體大蟹侠搿(px)

設(shè)html中的字體:fontSize = 100 * (clientWidth / ddesignWidth) = 1rem (乘以100只是為了方便計(jì)算可以根據(jù)需求任意設(shè)置)
元素在css中的寬度(rem) = 元素在設(shè)計(jì)稿中的寬度(px) / 100

二、sublime中插件cssrem的用法

cssrem安裝成功以后菠发,可以根據(jù)需求進(jìn)行設(shè)置

image.png
 {
   "px_to_rem":100, //即上面轉(zhuǎn)化原理一條中提到的100`
   "max_rem_fraction_length":3, //px轉(zhuǎn)化為rem后,小數(shù)點(diǎn)后保留的位數(shù)。默認(rèn)為  三位
  "available_file_types":[".html",".css",".less",".sass"]
}

三游沿、在頁面中引入一下函數(shù),方便px向rem的轉(zhuǎn)化

(function (doc, win) {
            var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        // 設(shè)計(jì)稿的寬度
      ddesignWidth = 750,
      recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 100 * (clientWidth / ddesignWidth) + 'px';
      };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末肮砾,一起剝皮案震驚了整個(gè)濱河市诀黍,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌仗处,老刑警劉巖眯勾,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異婆誓,居然都是意外死亡吃环,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門洋幻,熙熙樓的掌柜王于貴愁眉苦臉地迎上來模叙,“玉大人,你說我怎么就攤上這事鞋屈》蹲桑” “怎么了?”我有些...
    開封第一講書人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵厂庇,是天一觀的道長渠啊。 經(jīng)常有香客問我,道長权旷,這世上最難降的妖魔是什么替蛉? 我笑而不...
    開封第一講書人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮拄氯,結(jié)果婚禮上躲查,老公的妹妹穿的比我還像新娘。我一直安慰自己译柏,他們只是感情好镣煮,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鄙麦,像睡著了一般典唇。 火紅的嫁衣襯著肌膚如雪镊折。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,829評(píng)論 1 290
  • 那天介衔,我揣著相機(jī)與錄音恨胚,去河邊找鬼。 笑死炎咖,一個(gè)胖子當(dāng)著我的面吹牛赃泡,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播乘盼,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼升熊,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了蹦肴?” 一聲冷哼從身側(cè)響起僚碎,我...
    開封第一講書人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎阴幌,沒想到半個(gè)月后勺阐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡矛双,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年渊抽,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片议忽。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡懒闷,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出栈幸,到底是詐尸還是另有隱情愤估,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布速址,位于F島的核電站玩焰,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏芍锚。R本人自食惡果不足惜昔园,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望并炮。 院中可真熱鬧默刚,春花似錦、人聲如沸逃魄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至皂冰,卻和暖如春店展,著一層夾襖步出監(jiān)牢的瞬間养篓,已是汗流浹背秃流。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留柳弄,地道東北人舶胀。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像碧注,于是被迫代替她去往敵國和親嚣伐。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容