快速將px轉換成rem的方法


1.sass轉化

 1.0將樣式.css文件的px批量處理轉換成pxTorem(**px)的形式,

快速轉換的正則表達式為:([ :\(]{1})(-?\d{1,4})px,$1pxTorem($2px);

 

 1.1根據rem的使用原理,可以知道pxrem需要在html根元素設置一個font-size值,因為rem是相對於html根元素。在Sass中定義一個pxrem的函數,先要設置一個默認變量:

px轉rem $browser-default-font-size: 12px !default;
@function pxTorem($px){
@return $px / $browser-default-font-size * 1rem;
}

 1.2編譯

編譯指令:sass --watch --style compact sass/:css/

2.給Sublime Text 2添加插件-rem-px,如果你想要轉換成除以12的話,則需要在rem-px包中修改REM-PX.sublime-settings里面的文件內容。將里面的數字改掉即可。在sublime中快速將所以px搜索的正則方式是\d+px,,在編輯器里選擇find all 否則無效。然后輸入快捷鍵ctrl+shift+r即可


免責聲明!

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



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