---
title: Style
---

# Style of the component

If you use Ray to build a miniapp or a WeChat miniApp, responsive pixel (rpx) is recommended.

`rpx` can be used to adapt to screen width. The specified screen width is 750rpx. Take iPhone 6 as an example. The screen width is 375px and has total 750 physical pixels. 

> 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.

| Device | rpx converted to px (screen width ÷ 750) | px converted to rpx (750 ÷ screen width) |
| ------------ | -------------------------- | -------------------------- |
| iPhone 5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone 6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone 6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |

## Preprocessor

Ray supports less by default. In the future, more preprocessor settings will be available in the form of plugins.

## px conversion

Ray uses the px unit. This unit remains unchanged when you build a miniapp. If you build a web app, px is converted to rem, with a ratio of 100:1.

Example:

```css
.foo {
  height: 16px;
}
```

Build a miniapp

```css
.foo {
  height: 16px;
}
```

Build a web app

```css
.foo {
  height: 0.16rem;
}
```

## CSS Modules

Ray automatically recognizes CSS Modules. Files with `.module.css` or `.module.less` suffixes are recognized as CSS Modules files.

Example:

```js
// Automatically recognize foo.module.css as CSS Modules
import styles from './foo.module.css';
// Automatically recognize bar.css as global style
import './bar.css';
```