px to rem rpx vw中文文档 |px自动转换rem插件

news2024/11/21 14:45:41

【px to rem & rpx & vw】项目地址:

https://github.com/cipchk/vscode-cssrem/blob/HEAD/README.zh-CN.md 

作者:卡色-cipchk

https://github.com/cipchk

 cssrem

一个 px 与 rem 单位互转的 VSCode 插件,且支持WXSS微信小程序。

特性

  • 支持智能感知
    • px -> rem (快捷键:Alt + z)
    • rem -> px (快捷键:Alt + z)
    • px -> vw (快捷键:Alt + v, Alt + w)
    • vw -> px (快捷键:Alt + v, Alt + w)
    • px -> rpx (微信小程序, 快捷键:Alt + r)
    • rpx -> px (微信小程序, 快捷键:Alt + r)
  • 支持鼠标悬停显示转化过程
  • 支持直接打上标记
  • 支持选中区域

可以利用VSCODEKeyboard shortcuts重新定义快捷键。

如何使用

  • 在文件内自动转换,例如录入 12px 智能提醒对应转化后 rem 值
  • 光标至 14px 上,按下 Alt + z 对应转化 rem
  • 通过 F1 面板查找:cssrem

支持语言

html vue css less scss sass stylus tpl(php smarty3) tsx jsx

配置

【重要的话说三遍】

根目录的 .cssrem 文件优先级最高,

根目录的 .cssrem 文件优先级最高,

根目录的 .cssrem 文件优先级最高,

其格式如下:

{
  "rootFontSize": 18,
  "fixedDigits": 3
}

其次,也可以配置全局,点击 VS Code 的 文件 > 首选项 > 设置,打开设置面板:

名称描述默认值
cssrem.rootFontSize基准font-size(单位:px16
cssrem.fixedDigits保留小数点最大长度4
cssrem.autoRemovePrefixZero自动移除0开头的前缀true
cssrem.ingoresViaCommand当使用命令行批量转换时,允许忽略部分 px 值不转换成 rem(单位:string[]),例如:[ "1px", "0.5px" ][]
cssrem.addMark是否启用加上标记false
cssrem.hover是否启用悬停时显示转换数据, disabled: Disabled, always Anything, onlyMark: Only valid when cssrem.addMark is trueonlyMark
cssrem.currentLine是否当前行尾显示标记,disabled: Disabled, show Showshow
cssrem.ingores忽略文件清单,例如:[ 'demo.less', 'src' ]string[]
cssrem.languages支持语言清单 [ 'html', 'vue', 'css', 'postcss', 'less', 'scss', 'sass', 'stylus', 'javascriptreact', 'typescriptreact', 'javascript', 'typescript' ],默认全部包含string[]
cssrem.remHover是否启用 rem 悬停true
cssrem.vw是否启用vw支持false
cssrem.vwHover是否启用 vw 悬停true
cssrem.vwDesign规定设计稿宽度(一般等同于浏览器视口宽度)750
cssrem.wxssWXSS小程序样式 是否启用WXSS支持false
cssrem.wxssScreenWidthWXSS小程序样式 规定屏幕宽度,默认 750,尺寸单位750
cssrem.wxssDeviceWidthWXSS小程序样式 设备分辨率宽度,官方推荐使用 iPhone6 作为视觉稿的标准375

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1022291.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

成集云 | 金蝶EAS与旺店通ERP集成(旺店通主管库存)| 解决方案

源系统成集云目标系统 方案介绍 金蝶EAS是一款全球首款融合TOGAF标准SOA架构的企业管理软件,专门为大中型企业设计,以“创造无边界信息流”为产品设计理念,支持云计算、SOA和动态流程管理的整合技术平台。 旺店通ERP系统是一款专…

API(十)时间相关的SDK

一 时间相关的SDK ① 时间记录的必要性 1、案发现场的时间点2、通过时间判断性能3、时间的不准确性,日志落盘时间 --> 缓冲区导致延迟 ② 使用哪些日期和时间的函数 1、lua 标准时间函数,函数 os.time、os.date 和 os.difftime 提供了所有日期和时间2、在 openresty…

什么是商品价格监控,需要用到API接口嘛

商品价格监控是指通过系统化的方法来追踪、分析和比较商品价格的动态变化,以帮助商家及时获取市场价格信息,做出相应的决策。为了实现这一目标,API接口可以被用来获取商品价格信息。 具体来说,商家可以通过API接口连接到电商平台…

生产制造业厂家固定资产怎么管理

固定资产的管理对于企业的运营效率和盈利能力具有重要影响。然而,传统的固定资产管理方法往往存在许多问题,如资产的低效使用、维护成本高昂以及决策者对资产价值缺乏准确了解等。 因此,我们需要采用一种全新的方式来管理我们的固定资产。本文…

“温莎当下·麦克成风”2023赛季 杭州赛区决赛圆满落幕!

2023年9月16日,“温莎当下麦克成风”2023赛季上海赛区决赛在拱墅区大悦城水秀广场落下帷幕。比赛现场气氛高燃、精彩纷呈,选手们在璀璨的舞台上激情演唱,上演了一场精彩刺激的巅峰争霸赛。经过多轮比拼,最终7号选手方雪莹脱颖而出…

标准防雷接地网和简易地网的制作方法

防雷接地网是整套防雷系统不可缺少的部分,一般是由埋在地下一定深度的多个金属接地极和由导体将这些接地极相互连接组成一网状结构的接地体的总称。它广泛应用在电力、建筑、计算机,工矿企业、通讯等众多行业之中,起着安全防护、屏蔽等作用。…

Spring cloud gateway+apollo=bug?

这里是weihubeats,觉得文章不错可以关注公众号小奏技术,文章首发。拒绝营销号,拒绝标题党 spring cloud 版本 spring cloud: 2021.0.4spring cloud gateway: 3.1.4 背景 最近在配置研究网关的超时时间,有这么一个需求。 服务路由转发接口…

北工大汇编——综合题(2)

题目要求 编写一个比赛得分程序。共有7 个评委,按百分制打分,计分 原则是去掉一个最高分和一个最低分,求平均值。要求: 评委的打分以十进制从键盘输入。成绩以十进制给出,并保留 1位小数。输入输出时屏幕上要有相应提…

口袋参谋:淘宝宝贝秒卡首屏的方法!

​对于新手卖家来说,很多都不太明白,淘宝卡首屏是什么意思?其实卡首屏就是新品前期买家找不到的情况,通过卡首屏让他们快速找到宝贝。 通过卡首屏的方式,给买家账号注入产品标签,让买家进店前就是店铺的精…

「大数据-0.1」虚拟机VMware安装、配置、使用、创建大数据集群教程

目录 一、下载VMware Wworkstation Pro 16 二、安装VMware Wworkstation Pro 16 三、检查与设置VMware的网卡 1. 检查 2. 设置VMware网段 四、在VMware上安装Linux虚拟机 五、对安装好的虚拟机进行设置 1. 打开设置 2. 设置中文 3. 修改字体大小 4. 修改终端字体大小 5. 关闭虚…

【Vue】MVVM模型还没懂嘛

hello,我是小索奇,精心制作的Vue教程持续更新哈,想要学习&巩固&避坑就一起学习叭~ MVVM 模型 Vue虽然没有完全遵循MVVM模型,但Vue的设计也收到了它的启发在文档中也会使用VM(ViewModel的缩写)这个变…

终于搞清了:SPI、UART、I2C通信的区别与应用!

电子设备之间的通信就像人类之间的交流,双方都需要说相同的语言。在电子产品中,这些语言称为通信协议。 之前有单独地分享了SPI、UART、I2C通信的文章,这篇对它们做一些对比。 串行 VS 并行 电子设备通过发送数据位从而实现相互交谈。位是…

JVM内存结构解析(图文详解)

JVM内存结构 共享 和 隔离 线程共享区域:方法区、堆、直接内存 线程隔离区域:虚拟机栈、本地方法栈、程序计数器 线程共享:定义一个变量或者一个方法,多线程都可以同时访问、修改这个方法或者变量 线程隔离:就是数…

iPhone恢复出厂设置,掌握2个方法!

当您的手机出现闪退、内存不足、严重卡顿等情况,或者是想将手机进行二手转让时,您可能需要通过将iphone恢复出厂设置来解决问题。但是恢复出厂设置后,手机上的所有数据都会被清除。iPhone怎么恢复出厂设置?本文将为您介绍两种简单…

混淆矩阵和数据不平衡 (2/3)

一、说明 当我们的数据标签具有比另一个类别更多的类别时,我们说我们有数据不平衡。 如果数据集数据不平恒,如何评估分类器的效果?如果分类器不好,如何改进分类器?本篇将讲述不平衡数据下,混淆矩阵的应用。…

许战海战略文库|品类缩量时代:制造型企业如何跨品类打造份额产品?

所有商业战略的本质是围绕着竞争优势与竞争效率展开的。早期,所有品牌立足于从局部竞争优势出发。因此,品牌创建初期大多立足于单个品类。后期增长受限,就要跨品类持续扩大竞争优势,将局部竞争优势转化为长期竞争优势,如果固化不前很难获得增…

玩转 gpgpu sim 02记 —— 构建了什么

1. 设置环境变量 编译gpgpu-sim 需要先运行脚本 setup_environment , source setup_environment, 注释如下,主要是设置一些 Makefile中会用到的环境变量 # see README before running this # 下面这句用来检测当前的shell环境是不是 bash 或者 sh 或者 …

GD32F303窗口看门狗在待机模式下运行

1.窗口看门狗 独立看门狗的时钟关闭不了,所以低功耗模式下需要定期唤醒喂狗,否则就会重启,比较麻烦。窗口看门狗使用的是APB1时钟,低功耗模式下时钟就停止了,所以不需要定期唤醒喂狗。但是窗口看门狗有喂狗的时间窗口&…

韩国市场最全开发攻略

2022年1月1日,RCEP正式生效施行,韩国也是首次跟中国缔结自贸条约,更低的关税,更灵活的贸易规则、更简洁的通关程序都将为中韩在贸易上继续发力增加了更多可施展的空间。这也将帮助更多的企业在东亚市场大展拳脚,推进整…

归并排序~

将一个无序系列,分成小系列,相邻两个小系列进行排序合并,再将两个相邻小系列排序合并,。。。。 int[] data {0,5,4,8,9,3,2,67,23} len 9 第一次每个元素一组 0,5,4,8,9,3,2,67,23 相邻排序合并 …