小程序中的样式文件后缀为.wxss 不支持通配符* image.png

新增单位rpx

小程序中独有的响应式px单位 换算：手机屏幕不管为多少px，换算都为750rpx

响应式公式

屏幕大小* 设计稿的元素大小 / 设计稿大小 = 手机屏幕中的元素的大小

  • 屏幕大小

    • web开发 屏幕大小 = 100vw
    • 小程序开发 屏幕大小 = 750rpx

      calc 运算

      传统的css不支持运算 c3新增 calc支持运算

  • 语法：

    • width: calc(50vw - 1px)
    • 注意： 运算符两侧一定要加空格

      vscode插件

      安装插件
      image.png
      设置设计稿的宽度

      在settings.json中添加配置

  1. // 设置设计稿的宽度
  2.   "px-to-rpx.baseWidth": 375,

根据设计稿中元素尺寸，在wxss代码中直接使用px单位，
插件会自动将px转换为rpx
image.png