• 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

  • 相关阅读:
    手机UI-ul元素左右滑动栏 scrollbar 关键元素
    app自动化(二)python代码操控手机终端
    《Happy Birthday》游戏开发记录(送给朋友的小礼物)
    notepad++配置python2环境
    OSCP系列靶场-Esay-Sumo
    李沐深度学习记录5:13.Dropout
    计数排序+桶排序 详讲(思路+图解+代码详解)
    chrony时间服务
    Verilog:【1】时钟分频电路(clk_divider.sv)
    笔试题 键盘 车队
  • 原文地址:https://blog.csdn.net/cplvfx/article/details/132976915