#Configure Style

The value of a responsive style automatically increases or decreases to adapt to the device environment. Unit: rpx.

Conversion: 750 rpx = 100 vw

The value of an absolute style is the same for all devices. Unit: px.

#Style file

For the styles of pages and components, we recommend that you use CSS Modules to avoid style conflicts.

Follow these rules:

• File name: xxx.module.[css|less].
• Modules: manages each page or component in a style file.

Home
├── index.module.css
└── index.tsx

#Style rules

We recommend that you name each style in camel case and prevent a nested style name.

Recommended:

// Good
.home {
  color: red;
}

.homeTitle {
  font-size: 48rpx;
}

Not recommended:

// Bad
.home {
  color: red;
  .title {
    font-size: 48rpx;
  }
}

#Design draft

The design width in your design draft must be 750 pixels, so you can save your efforts in data conversion.