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


    【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 文件优先级最高,

    其格式如下:

    1. {
    2. "rootFontSize": 18,
    3. "fixedDigits": 3
    4. }

    其次,也可以配置全局,点击 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

  • 相关阅读:
    深入理解netty(二)Channel
    Flutter组件--ThemeData属性
    机器学习-学习笔记(一) --> (假设空间 & 版本空间)及 归纳偏好
    Windows常见的几种权限维持
    RDPCrystal EDI SDK 10.0.4.X Crack
    【MySQL】------数据库连接
    【.net core】【sqlsugar】条件查询时使用Contains的注意问题
    MQ相关介绍
    Python之Excel数据相关
    MRO工业品怎么做好供应链?数字化供应链管理系统赋能MRO采购构筑企业核心优势
  • 原文地址:https://blog.csdn.net/cplvfx/article/details/132976915