My-common-css-lib NPM

通用CSS样式库

一个轻量级、高性能的现代化 CSS 样式库，专注于响应式设计和组件化开发。

特性

🚀 轻量级设计，按需加载
📱 完整的响应式支持
🎨 灵活的主题定制
🛠 丰富的工具类
📦 模块化组件

安装

npm install your-common-css-lib

快速开始

// 完整引入
import 'your-common-css-lib/dist/index.css';

// 按需引入
import 'your-common-css-lib/dist/grid.css';

Grid 系统

基础单位说明

本样式库支持两种基础单位：

rpx：响应式像素单位，会根据屏幕宽度自动计算，常用于移动端适配
px：固定像素单位，用于需要精确控制的场景

Grid 基础配置详解

// styles/grid.scss

// 核心配置
$grid: (
    unit: rpx,           // 单位类型：rpx/px
                        // - rpx 会自动按照屏幕宽度计算
                        // - px 则使用固定像素值

    base: 1,            // 基础比例
                        // - 默认值为1，表示1:1的比例
                        // - 可以调整为其他值来改变整体缩放比例

    cols: 12,           // 默认列数
                        // - 12栅格系统，可以被2、3、4、6整除
                        // - 可以根据需求修改，如设置为24

    screens: (          // 断点配置
        sm: 640px,      // 小屏幕 (≥640px)
        md: 768px,      // 中等屏幕 (≥768px)
        lg: 1024px,     // 大屏幕 (≥1024px)
        xl: 1280px      // 超大屏幕 (≥1280px)
    )
) !default;

基础配置使用示例

<!-- 使用默认12列网格 -->
<div class="grid grid-cols-12">
    <div class="col-span-6">占据6列</div>
    <div class="col-span-6">占据6列</div>
</div>

<!-- 响应式列宽设置 -->
<div class="grid">
    <div class="col-12 md:col-6 lg:col-4">
        <!-- 在不同屏幕宽度下占据不同列数 -->
        <!-- 移动端：12列 -->
        <!-- 平板：6列 -->
        <!-- 桌面：4列 -->
    </div>
</div>

单位使用建议

移动端开发建议使用 rpx 单位，可以实现更好的屏幕适配
PC端开发可以使用 px 单位，获得更精确的布局控制
混合开发时可以通过配置 base 值来调整不同单位间的换算比例

使用示例

<!-- 基础网格 -->
<div class="grid grid-cols-4 gap-md">
    <div>项目 1</div>
    <div>项目 2</div>
</div>

<!-- 响应式布局 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-sm md:gap-md">
    <div>自适应内容</div>
</div>