【unibest文档】4、样式篇

样式篇

本篇主要介绍 UnoCSS 的使用,以及如何与 设计稿尺寸 对应。

UnoCSS

UnoCSS 是按需使用的原子 CSS 引擎,提供了良好的样式支持。

在 VSCode 中还可以预览,

如果原子化 UnoCSS 没有预览效果,请安装 VSCode 插件 antfu.unocss

如果不记得原子类,可以查 UnoCSS 的原子类UnoCSS Interactive,如下图

也可以查看 tailwindcss 的原子类,更加清晰明了,链接 - tailwindcss,如下图:

常用的原子类

  • 宽高内外边距: w-2, h-4, px-6, mt-8
  • 前景色背景色:text-green-400, bg-green-500
  • border: border-2, border-solid, border-green-600, b-r-2 (注意 border = border-1,就是说边框 1px 时,一般简写为 border )
  • border-radius: rounded-full, rounded-6, rounded-sm (不是 br-10, 也不是 b-r-10)
  • line-height: leading-10 (不是 l-10, 也不是 lh-10)
  • hover: hover:text-green-200, hover:bg-green-300, hover:border-dashed
  • flex: flex, items-center, justify-center, flex-1

UnoCSS 配置

下面内容选读:

:::details unocss.config.ts 文件内容如下:

ts 复制代码
// uno.config.ts
import {
  type Preset,
  defineConfig,
  presetUno,
  presetAttributify,
  presetIcons,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

import { presetApplet, presetRemRpx, transformerAttributify } from 'unocss-applet'

// @see https://unocss.dev/presets/legacy-compat
import { presetLegacyCompat } from '@unocss/preset-legacy-compat'

const isMp = process.env?.UNI_PLATFORM?.startsWith('mp') ?? false

const presets: Preset[] = []
if (isMp) {
  // 使用小程序预设
  presets.push(presetApplet(), presetRemRpx())
} else {
  presets.push(
    // 非小程序用官方预设
    presetUno(),
    // 支持css class属性化
    presetAttributify(),
  )
}
export default defineConfig({
  presets: [
    ...presets,
    // 支持图标,需要搭配图标库,eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        display: 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    // 将颜色函数 (rgb()和hsl()) 从空格分隔转换为逗号分隔,更好的兼容性app端,example:
    // `rgb(255 0 0)` -> `rgb(255, 0, 0)`
    // `rgba(255 0 0 / 0.5)` -> `rgba(255, 0, 0, 0.5)`
    presetLegacyCompat({
      commaStyleColorFunction: true,
    }) as Preset,
  ],
  /**
   * 自定义快捷语句
   * @see https://github.com/unocss/unocss#shortcuts
   */
  shortcuts: [['center', 'flex justify-center items-center']],
  transformers: [
    // 启用 @apply 功能
    transformerDirectives(),
    // 启用 () 分组功能
    // 支持css class组合,eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
    transformerVariantGroup(),
    // Don't change the following order
    transformerAttributify({
      // 解决与第三方框架样式冲突问题
      prefixedOnly: true,
      prefix: 'fg',
    }),
  ],
  rules: [
    [
      'p-safe',
      {
        padding:
          'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
      },
    ],
    ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
    ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
  ],
})

/**
 * 最终这一套组合下来会得到:
 * mp 里面:mt-4 => margin-top: 32rpx  == 16px
 * h5 里面:mt-4 => margin-top: 1rem == 16px
 *
 * 另外,我们还可以推算出 UnoCSS 单位与设计稿差别4倍。
 * 375 * 4 = 1500,把设计稿设置为1500,那么设计稿里多少px,unocss就写多少述职。
 * 举个例子,设计稿显示某元素宽度100px,就写w-100即可。
 *
 * 如果是传统方式写样式,则推荐设计稿设置为 750,这样设计稿1px,代码写1rpx。
 * rpx是响应式的,可以让不同设备的屏幕显示效果保持一致。
 */

UnoCSS presets

主要有 4个:

  • presetUno ------ UnoCSS 默认的预设,H5端 适用,非H5端 不支持,代码已经作区别处理。
  • presetApplet 小程序预设,因为默认 Unocss 预设 是针对 WEB 的,如果不加以处理,会报错,比如小程序不支持 *, 没有 body 等。该预设同样对 APP 生效。
  • presetIcons,专门使用 UnoCSS Icons 的,需要搭配图标库使用,eg: @iconify-json/carbon, 代码编写如 <button class="i-carbon-sun dark:i-carbon-moon" />
  • presetLegacyCompat 针对低端 APP 不认识新的函数颜色的兼容性预设,可以将颜色函数 rgb()和hsl() 里面空格分隔转换为逗号分隔,更好的兼容性APP端,example: rgb(255 0 0) -> rgb(255, 0, 0)

    rgba(255 0 0 / 0.5) -> rgba(255, 0, 0, 0.5)

UnoCSS shortcuts

ts 复制代码
/**
* 自定义快捷语句
* @see https://github.com/unocss/unocss#shortcuts
*/
shortcuts: [['center', 'flex justify-center items-center']],

可以编写一些常用的快捷类名,如上表示 center 就是 flex justify-center items-center 的组合,合理的添加快捷类名可以加快样式编写。

:::

设计稿尺寸

不同的编写方式,需要设置不同的设计稿尺寸,请看下文:

1. 传统编写方式

如果有设计稿,通常使用传统的编写 CSS 的方式,里面的对应尺寸规律如下。以蓝湖为例,假如设计稿宽度为 750px,则直接复制样式代码到 css 代码,同时把 px 批量替换为 rpx 即可。

如果设计稿不是 750px 可以调整蓝湖的设置,让设计稿宽度为 750px

下面为一段辅助说明文案,从 uniapp 官网搬运而来。

rpx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx

开发者可以通过设计稿基准宽度计算页面元素 rpx 值,设计稿 1px 与框架样式 1rpx 转换公式如下:

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

换言之,页面元素宽度在 uni-app 中的宽度计算公式:

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明:

若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 Auni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx

若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 Auni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117rpx

若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 Buni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400rpx

2. UnoCSS 编写方式

经过上一节的 unocss.config.ts 配置,可以得到下面的组合:

mp 里面:mt-4 => margin-top: 32rpx == 16px

h5 里面:mt-4 => margin-top: 1rem == 16px

我们还是把设计稿设置为 750,设计稿上多少 px 的元素,写成多少 rpx 即可。

元素 A 在设计稿上的宽度为 100px,则写 w-100rpx 即可。

就是把 传统编写方式 中写在 css 中的样式搬到了 UnoCSS 中。

如果要想用 w-100 这种方式,需要做额外的处理():

太忙了,有空再写吧。

总结

本文主要介绍了 UnoCSS 的使用,以及 unocss.config.ts 中的一些配置项。

同时说明了设计稿在两种编写方式下的宽度的设置,分别为 7501500.

最后说明一下,原子化CSS传统方式 两者不是互斥的,他们是互补的,合适的地方使用合适的方式。

相关推荐
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料13 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23413 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq229511650221 小时前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165021 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app
qq22951165021 天前
微信小程序 uniapp+vue老年人身体监测系统 acyux
vue.js·微信小程序·uni-app
摇头的金丝猴2 天前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
小远yyds2 天前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app
qq22951165022 天前
uniapp+vue加油服务系统 微信小程序
vue.js·微信小程序·uni-app
重生之我是菜鸡程序员2 天前
uniapp 使用vue/pwa
javascript·vue.js·uni-app