好用的px轉rem插件推薦

Clect 發布于2019-08-30 14:20 / 1352人閱讀

摘要：然而在固定布局時我們通常以為基準單位進行調整，進而通過計算獲取的值，這時如果有個好用的轉工具會讓工作事半功倍。啟用此插件的文件類型。輸入值后按下鍵直接轉換，使用取消轉換

在響應式布局中，rem這個css單位已經慢慢嶄露頭角，成為最佳解決方案之一。然而在固定布局時我們通常以px為基準單位進行調整，進而通過計算獲取rem的值，這時如果有個好用的px轉rem工具會讓工作事半功倍。本文將推薦一些常用開發工具的px轉rem插件

VSCode插件 1、cssrem

安裝

快捷鍵ctrl+p打開轉到文件搜索框，輸入命令：ext install cssrem

配置

參數配置文件：VSCode -> 文件 -> 設置 -> 搜索cssrem

cssrem.rootFontSize root font-size (unit: px), default: 16

cssrem.fixedDigits px轉rem小數點最大長度，默認：6。

cssrem.autoRemovePrefixZero 自動移除0開頭的前綴，默認：true

該插件可以在輸入時選擇轉換，也可以使用ctrl+p，ctrl+r快捷鍵轉換，支持html vue css less scss sass等文件格式或自定義文件

2、px to rem 安裝

快捷鍵ctrl+p打開轉到文件搜索框，輸入命令：ext install px-to-rem

配置

參數配置文件：VSCode -> 文件 -> 設置 -> 搜索px to rem

px-to-rem.px-per-rem: number of pixels per rem. Default is 16px.

px-to-rem.number-of-decimals-digits: 最多保留的小數位

px-to-rem.only-change-first-ocurrence: 轉換全部或只轉換當前選擇的

px-to-rem.notify-if-no-changes: 啟用/關閉通知

選中要轉換的值，使用快捷鍵Alt+z執行px轉rem或rem轉px

Sublime Text插件 1、cssrem插件

安裝

下載本項目，比如：git clone https://github.com/flashlizi/cssrem
進入packages目錄：Sublime Text -> Preferences -> Browse Packages...
復制下載的cssrem目錄到剛才的packges目錄里。
重啟Sublime Text。

配置

參數配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem

px_to_rem - px轉rem的單位比例，默認為40。

max_rem_fraction_length - px轉rem的小數部分的最大長度。默認為6。

available_file_types - 啟用此插件的文件類型。默認為：[".css", ".less", ".sass"]。

輸入px值后按下Enter鍵直接轉換，使用Ctrl+z取消轉換

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115944.html

PostCSS真的太好用了！

摘要：下面的代碼違反規則下面的代碼符合規則禁止使用十六進制顏色十六進制的顏色違反規則無效的十六進制色同樣違規下面的是符合規則的自動將十六進制色轉換為大寫或者小寫可以使用實現同樣的功能。 showImg(https://segmentfault.com/img/remote/1460000014782565); 在PostCSS官網有著這樣的對PostCSS特性介紹，箭頭后面是對應功能的插件及...

SKYZACK 2019-08-29 15:18 評論0 收藏0
vw+rem移動端自適應布局

摘要：本文同步發布于我的個人博客上移動端自適應布局不管是面試還是工作過程中，移動端的布局都比較常見，而移動端適配方法也是多種多樣。表示當前視口寬度的百分之一。同時在移動端，的兼容性還不錯，完全可以直接使用。這樣完成了一個簡單好用的移動端布局了本文同步發布于我的個人博客上 - vw+rem移動端自適應布局不管是面試還是工作過程中，移動端的布局都比較常見，而移動端適配方法也是多種多樣。一般來...

Little_XM 2019-08-30 11:09 評論0 收藏0
使用vue開發移動端管理后臺

摘要：獨立完成一個移動端項目不是很明白為何會有這樣的商品管理后臺，還是有些經驗不足，包括對產品的全局思考，對插件的選擇等，都有考慮不周的缺點，導致自己中途想換圖形界面插件，浪費了點時間，這里記錄下，總結下經驗，理一下思路。獨立完成一個移動端項目(不是很明白為何會有這樣的商品管理后臺)，還是有些經驗不足，包括對產品的全局思考，對插件的選擇等，都有考慮不周的缺點，導致自己中途想換圖形界面插件，...

simpleapples 2019-08-23 15:42 評論0 收藏0
【技術】移動端適配 px2rem/px2vw 的原理與實現

摘要：不同的前端框架，配合等打包工具，可以更高效的使用這些插件，完成移動端適配的配置工作。簡介【目標】：前端開發移動端及H5時候，不需要再關心移動設備的大小，只需要按照固定設計稿的px值布局！【基礎】 dpr（設備像素比）css的像素px不等于設備像素/分辨率/各種值，css的px可以簡單理解為虛擬像素，與設備無關，css的px需要乘dpr計算為設備像素； css3 的 rem，即ro...

AlexTuan 2019-08-22 18:41 評論0 收藏0