Atom 编辑器插件: px2rem-plus 转换 px(像素) 到 rem 单位

最新推荐文章于 2021-02-22 06:21:02 发布
最新推荐文章于 2021-02-22 06:21:02 发布
阅读量178 收藏
点赞数
原文链接：https://segmentfault.com/a/1190000008197865
版权

对于移动端网页的开发，目前看采用 rem 单位可能是一个相对完美的解决方案。在平时的开发中经常需要把 px 转换成 rem。由于我目前主要使用 Atom 这个编辑器来开发，也用了一些类似的转换插件，但都不能令我满意（我还给其中一个插件提交过 PR），所以自己开发了一个 Atom 插件。

安装: apm install px2rem-plus
下载: https://atom.io/packages/px2r...
Github: https://github.com/hex-ci/px2...

主要功能

自动完成

v2-69ddf9364d81872feb7f85e2d82ab90b_r.png

转换编辑器中的内容

支持转换全部文本或选中的文本内容。快捷键: ctrl-alt-r

为当前文件设置基准像素大小

每个文件可以有自己的基准值，并且这个设置会自动保存，下次打开相同文件会自动使用设置过的值。快捷键: ctrl-alt-p

v2-6a7609b1cf023e7a2651bab364a82e36_r.png

添加注释

支持给转换后的 rem 单位添加注释，例如 /* 100/75 */

保留前导零

如果转换后的值小于 1，则可以选择是否保留前导零，例如 0.5rem(保留) 或 .5rem(不保留)

演示

example.gif

希望对使用 rem 的朋友有帮助。

weixin_33933118
关注
React中配置px转rem
weixin_57157114的博客
09-04 263
React中配置px转rem 安装依赖 npm i lib-flexible --save npm i postcss-px2rem --save 主要用来暴露项目配置 npm run eject ！如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下 git add . git commit -m '自定义名' npm run eject 然后打开项目中 config->webpack.config.js 进行配置 在配置文件中添加如下代码 const px
Atom-px2rem-plus,将px转换为atom的rem包。贡献给hex.zip
09-18
Atom-px2rem-plus.zip,将px转换为atom的rem包。PX2REM 包,atom是一个用web技术构建的开源文本编辑器。
Atom-px-to-rem,将像素转换为rem.contribution to gmendonca/px的atom包.zip
09-18
Atom-px-to-rem.zip,将像素转换为rem的atom包PX到REM包,atom是一个用web技术构建的开源文本编辑器。
基于px2rpx-loader，探讨一下loader的封装思想
weixin_34167819的博客
07-18 545
本文以px2rpx-loader的源码为学习对象，了解其工作机制以及loader封装的思想。 1.前言 最近在了解mpvue框架的时候，对于其能够实现一套代码兼容web和微信小程序（以下简称小程序）的能力十分着迷，虽然小程序的MINA框架有着Vue的影子，但是无口否认的，小程序做了很多有着自己风格的封装，如rpx单位，WXML中的 view, button, text等标签，与web有着较多的...
全栈工程师之路-中级篇之小程序开发-第一章第五节从px到rpx
https://github.com/xiaohuoni
07-31 1720
这一小节作为第一章的最后一节，其实关于单位的文章，在博客上倒是挺多的。 我一直在想，我是不是有必要再写这一节，还是给大家提供一些阅读链接。 因为关于单位的定义都是比较官方的。没什么好讨论的，我这里做一个汇总和简单的说明吧。 首先本文只以移动设备为例说明。 本文摘要：设计师以iphone6为标准出设计稿的话，1rpx=0.5px=1物理像素。Photoshop里面量出来的尺寸为物理像素点。所
gulp-px2rem-plugin：将px转换成rem
02-03
gulp-px2rem-插件 将px转化成rem的gulp插件。 用rem来做响应式开发的时候，将px转换成rem值的时候，是每一个程序员头大的事情。 起初，我使用sublime的cssrem插件，效果挺好，避免了我重复使用小学学习的除法技能。...
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
的插件，可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位（观点）。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。此脚本将从您选择...
px、rem转换工具 grunt-px2rem-master
02-04
`grunt-px2rem-master`则是这个插件的主分支或最新版本的压缩包。 **一、px与rem单位** 1. **px（像素）**：像素是CSS中最基本的长度单位，它是一个绝对单位，代表显示器上一个点。在非Retina屏幕或不开启设备像素...
px2rem-loader:px2rem CSS文件的Webpack加载器
05-13
px2rem-loader 一装载机 安装 npm install px2rem-loader webpack配置 module.exports = { // ... module: { rules: [{ test: /\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, {...
mpvue中使用rpx
一个天秤座的程序猿????
08-26 490
mpvue中使用rpx 引用px2rpx-loader // utils.js 34行 px2rpxLoader var path = require('path') var fs = require('fs') var config = require('../config') var ExtractTextPlugin = require('extract-text-webpack-plugin') var mpvueInfo = require('../node_modules/mpvue/pa
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
今天，我们使用Vue CLI3 做一个移动端适配 。   前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 2、在 main.js 引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') 3、在 index.html 编辑
vant部署_记录mpvue+vant-weapp的使用（一）：安装配置使用，引入vant-weapp
weixin_30843553的博客
02-22 357
2020-8-7前来更新-------------------------------------------放上成品，可以参考参考： 之前用vue用的比较习惯，比较喜欢里面的组件式开发，能少写一些复用的代码，于是尝试一下美团的mpvue来开发小程序。部署教程官网里面的就可以了。然后，mpvue只是提供了代码编辑的框架而已，里面的组件之类需要第三方的组件库，我看到基本上用的vant-weapp的比...
vue使用px2rem
細水、長流√的专栏
11-27 2819
做移动端时，适配 是必须的。使用rem单位，可在不同屏幕上完美显示相同的布局。px2rem 插件方便的将px单位转为了rem。  px2rem 地址：https://www.npmjs.com/package/px2rem  使用方式：  1、安装 npm install px2rem-loader 或者 cnpm install px2rem-loader  2、vue中配置 在build下的 ...
vue中使用px2rem
MIR_zhang的博客
04-03 5507
在这里首先要说明下rem是什么? rem是相对于根元素的字体大小的单位 px2rem安装 yarn add px2rem 在utils中增加px2remLoader 看看里面的配置项option是些什么吧 Usage: px2rem [options] <file...> Options: -h, --help ...
mpvue微信小程序动画_mpvue微信小程序系列
weixin_30696229的博客
12-31 101
项目空闲时间，来做一波温故知新。当前时期的需求是做一个拼团的小程序。在这之前在做一个微信公众号H5项目，技术栈是Vue全家桶(vue+router+vuex+vant...)。在新的小程序项目中有很多组件类似于之前项目的组件，所以决定使用mpvue作为基础来搭建项目。mpvue框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运...
vue vue-cli @vue/cli将px转换成rem单位配置(flexible,px2rem)
loushengyue
06-30 7644
序   与原来的vue-cli 2.x版本不同的是：如果使用最新版本的@vue/cli初始化vue项目时，通常看不到webpack的配制文件，在原来的2.x版本，我们本可以轻松配制px2rem相关配置。为了解决这个问题，我研究了一下vue-cli的官方文档，发现我们仍然可以像以往那样配制。具体步骤如下： 1. 安装   安装lib-flexible： npm install --save ...
postcss-pxtorem 插件自动转换 rem 单位的配置
热门推荐
weixin_42349568的博客
01-21 2万+
一，原因 既然看到这篇博客，说明各位已经知道为啥要做rem适配，以及rem适配的原理。 写这篇博客的原因在于，网上很多postcss-pxtorem 插件的配置都无法生效（原因在于创建项目的工具如vue-cli版本等的不同），生生地浪费了很多时间。于是重新整理下，套用下个神棍点地说法，就是亲测有效~~哈哈。 二，使用postcss-pxtorem 的方法 0，无效原因 我的项目是使用vue-cli3创建的，网上很多方法说安装这个插件生成.postcss.js文件啊，或者在根目录新建postcss.confi
Vue中使用px2rem
大灰狼的小绵羊哥哥的博客
09-12 1594
在做移动端项目时rem是必不可少的； 首先安装px2rem： npm install px2rem-loader -s npm install lib-flexible —s 然后在main.js中引入lib-flexible import 'lib-flexible/flexible' 在vue项目中build下的 utils.js中，找到generateLoaders 方法修改...
pxToRem插件
Mr_Yan的博客
11-07 2825
前两天维护一个老的项目，用到了Jquery-WEUI框架，发现其UI框架中的css文件大都用的是px，不能够很好的自适应，所以去GITHUB上找到一个插件。postcss-pxtorem。 官方文档很简单明了，我这里就不再讲解怎么使用啦。 ...
webpack-px2rem-plus-loader
最新发布
09-13
Webpack-px2rem-plus-loader是一个用于webpack打包工具链的插件，主要用于处理CSS中px单位转换为 rem 单位的过程。它是在 CSS 中应用响应式设计的一种常见实践，尤其是在使用淘宝前端团队开发的 px2rem 这种将像素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值