Sublime Text中安裝插件來實現px與rem間的換算


  今天在群里無意中看到了群友分享的一篇關於移動端的文章。里面其他內容我倒不大感興趣,反而是rem讓我提起了興趣。

  首先來談一下rem,rem是CSS3中新增加的一個單位值,它和em單位一樣,都是一個相對單位。所不同的是,em是相對於元素的父元素的font-size進行計算;而rem是相對於根元素html的font-size來計算的。這樣一來,rem就繞開了復雜的層級關系,實現了與em類似的功能。

  1、sublime text2中安裝REM-PX插件來實現px與rem間的互換。

    package control組件安裝。

    1.1按ctrl+` 調出console

    1.2粘貼以下代碼到底部命令行並回車:

    import urllib2,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

    1.3. 重啟Sublime Text 2。 

    1.4. 如果在Perferences->package settings中看到package control這一項,則安裝成功。

  如果這種方法不能安裝成功,可以到這里下載文件手動安裝

 用Package Control安裝插件的方法:

  1. 按下Ctrl+Shift+P調出命令面板
  2. 輸入install 調出 Install Package 選項並回車,然后在列表中選中要安裝的插件。

  這里選擇的是REM-PX插件,安裝完后,重啟sublime text就行了。

  你可以通過PreFerences>Browser Packages下面的REM PX文件夾來查看相關的配置文件或修改配置文件,這里我先來說一下這個文件

  

  該文件中默認16px表示1rem,即要將以px為單位的值轉換為以rem為單位時,是直接除以16來計算的。這里具體得看你的根元素即html的font-size值是多少,你就將這個值設置多少即可。

  這三個文件則是說明如何使用。

  

  例如,要將以px為單位的值轉換為以rem為單位的時候,只需選中該值(注意:連同單位一起選中),然后時候Ctrl+shift+r即可轉換成以rem為單位的值,

  同理,如需將以rem為單位的值轉換為以px為單位的值時,只需選中該值(注意:連同單位一起選中),然后使用Ctrl+shift+x即可轉換成以px為單位的值了。

  

  2、在sublime text3中安裝CSSREM插件來實現px轉換為rem

  具體實現看這里

  這里我要說的一點是px轉換為rem的單位比例,該插件中默認單位比例是40,即表示40px相當於1rem,而我們瀏覽器一般默認html的font-size為16px,而我們也習慣性的將html的fong-size值設置為62.5%(即10/16*100%)即10px,這樣的話,在轉換的時候就比較好轉換了,直接將以px為單位的值除以10即可。因此我們在具體的實現時得看一下你html元素的font-size是多少,你便可以將轉換的單位比例改為多少。具體情況具體分析啦。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM