2. 程式人生 > >WebStorm新增px轉rem單位外掛

WebStorm新增px轉rem單位外掛

阿新 • • 發佈：2018-11-02

背景

使用rem時需要將原來的px轉成rem，一般是通過在媒體查詢中設定轉換的比例為10或100來方便計算，這裡我考慮在IDE中開發外掛來通過一個快捷鍵的形式來使IDE自動轉換單位，更好地提高效率以及適用不同的比例，我使用的IDE是WebStorm，下面介紹開發方案。

方案

通過IntelliJ提供的外掛API來取出highlight部分的text，再在IDE中設定一個可以設定比例的視窗，在外掛中根據獲取的text和使用者設定的比例來計算轉換後的rem的值，將計算後的值寫到相應的區域。

後續的使用中，為更加提高開發效率，考慮在使用游標highlight標出數值外，再新增自動轉換當前游標所在行中包含的可以轉換px值的方式，開發文案與上述相似，只要獲得行號與行的內容即可。

程式碼

外掛程式碼已託管在github中，本文章中不再重複列出，需要的朋友可以前往github檢視，外掛的使用方法也可以在上面找到，這裡也不再贅述。

使用

外掛已上傳到jetbrains官網中，目前支援webstorm和idea，可以在官方倉庫中搜索 px2remforwebstorm 找到外掛（File - Settings - Plugins - Browse repositories）。

首先需要設定轉換的比例值，設定選單可以在 File - Other Settings - PX2REM 中找到，轉換使用 shift f 快捷鍵，可以轉換游標選中的文字，也可以轉換一行內可以轉換的樣式，一些複雜的樣式在轉換出現問題時可以用游標選中文字的方式轉換。
在這裡插入圖片描述

傳送門

github地址 （持續更新）

相關推薦

WebStorm新增px轉rem單位外掛

背景 使用rem時需要將原來的px轉成rem，一般是通過在媒體查詢中設定轉換的比例為10或100來方便計算，這裡我考慮在IDE中開發外掛來通過一個快捷鍵的形式來使IDE自動轉換單位，更好地提高效率以及適用不同的比例，我使用的IDE是WebStorm，下面介紹開發方案。 方案 通過IntelliJ提供的外

Sublime安裝px轉rem外掛

外掛地址 外掛下載地址 安裝位置 sublime軟體頭部導航中找到Preferences -> Browse Packages點選開啟後把下載的檔案複製進去。 配置生效（配置後重啟） Preferences -> Package Settings ->

css移動端單位轉換 px 轉rem

(function (a, d) { var b = a.documentElement, e = "onorientationchange" in window ? "onorientatio

px自動轉rem的外掛 適用於sublime

px自動轉rem的外掛  適用於sublime 因為電腦有裝sublimetext，所以這次就介紹適用於sublime的px自動轉rem的外掛。 下面我介紹一下，如何配置： 1. 我們可以在GitHub上下載所依賴的檔案； https://github.com/flash

px-em-rem單位轉換

char back col har cnblogs itl ext utf-8 doc <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

好用的px轉rem插件cssrem

package 復制 直接 參數配置 AC css bsp style 轉換 下載本項目，比如：git clone https://github.com/flashlizi/cssrem 進入packages目錄：Sublime Text -> Preferences

PX轉REM

color ont str ron add als fonts tel script PX轉REM <script> var clientWidth; var px; (function (doc, win) { var

vue配置px轉rem

1.下載lib-flexible npm i lib-flexible --save 2.在index.html中 <html data-dpr = '1'> 在common.css中寫   html { font-si

vue使用postcss-pxtorem px轉rem

裝包 cnpm install postcss-pxtorem -D 修改根目錄 .postcssrc.js 檔案 // https://github.com/michael-ciniawsky/postcss-load-config modul

如何在vscode裡將px轉rem，而且還得爽！

自從新版移動端IM介面改用rem適配，效果實在太棒了。所以，接下來的主要工作會將一些核心頁面，也從px向rem轉移。 然，一直用慣了VSCODE，再加上設計稿等諸多原因，如果真想一下子從rem上編碼著實還是很困難。因此，一般而言，都是先訂一個基準大小，最後根據這個大小進行轉

微信小程式rpx，px，rem單位換算規則

小程式的單位rpx是根據iphone6的裝置寬度定義的。(1).rpx:不論哪個型號的手機，螢幕寬度都是750rpxrpx與px的轉換，根據設計稿換算例如：設計稿750px寬度，ps上量出或者標出的寬度是多少，那麼就定義多少rpx，也就是，1px = 1rpx例如：設計稿64

一個使用最簡單的px轉rem預處理工具

如果你使用 Stylus 作為你的預處理CSS的工具，那麼 px2rem 是你使用最簡單處理 px 轉 rem 工具，stylus-px2rem 使用方法如此簡單：首先安裝工具npm install stylus-px2rem --save-dev然後只要在你

vue-cli3.0 使用 postcss-pxtorem px轉rem

pos otv source .config npm root stc class cto 1. 安裝依賴包 npm install postcss-pxtorem --save-dev 2. 在vue-cli3.0中。去掉了build和config文件夾。所有的配置都

移動端mixin的px轉rem

1、多屬性傳遞 @mixin px2rems($pxs){ @each $key, $value in $pxs{ #{$key}: $value/$baseFontSize * 1rem; } } 使用例子： .a

vue px 轉rem

沒有 uil utils tro gin 使用 doc body import 來自：https://www.cnblogs.com/wangqiao170/p/8652505.html 侵 刪 每一個認真生活的人，都值得被認真對待 v

px,em,rem,vw單位在網頁和移動端的應用

可能 -1 har 網頁設計 小時 html 常用 應對 與他 px： 是網頁設計中最常用的單位，然而1px到底是多大長，恐怕沒有人能回答上來 它用來表示屏幕設備物理上能顯示的最小的一個點，這個點不是固定寬度的，不同設備上點的長度、比例有可能會不同。 假設：你現在用的顯示器

css3單位：px,em,rem,vh…

oid 項目 單位 chrom 相對 opera art 默認字體 作用 小夥伴們，你們聽說過多少？我們在前端切圖項目中用到的有px，em，rem，vh，% 其他基本沒用到過了。特別是vh ，特別好用。 附所有css單位，應該是最全的了 px：絕對單位，頁面按精確像素展示

css3中單位px,em,rem,vh,vw,vmin,vmax的區別及瀏覽器支持情況

定義 ie11 ring star ocl light for 無法 頁面 px：絕對單位，頁面按精確像素展示 em：相對單位，基準點為父節點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。 rem：相

css裏px em rem特點（轉）

現象 ont 我們 方法 換上 放大 fire 就會 小時 1、px特點： 1、IE無法調整px作為單位的字體大小； 2、Firefox能夠調整px、em和rem。 px是像素，是相對長度單位，是相對於顯示器屏幕分辨率而言的。 2、em特點： 1、em的值並不是固定的； 2

vue打包的時候自動將px轉成rem的操作方法

px2rem-loader 需要與 flexible 配合使用，不然px2rem僅僅只是轉成rem卻不會設定rem的資訊 安裝 flexible npm i lib-flexible -S 然後在main.js中引入 import ‘lib-flexible/flexible