# Rem

# rem, em and px units

## rem units

All Mantine components use `rem` units to apply size styles (`margin`, `padding`, `width`, etc.).
By default, `1rem` is considered to be `16px`, as it is the default setting in most browsers.
All components scale based on the user's browser font-size settings or font-size of the `html`/`:root`.

```tsx
import { Slider } from '@mantine/core';

function Demo() {
  return (
    <Slider
      defaultValue={100}
      min={70}
      max={130}
      onChange={(value) => {
        document.documentElement.style.fontSize = `${value}%`;
      }}
    />
  );
}
```


## rem units scaling

If you want to change the font-size of the `:root`/`html` element and preserve Mantine component sizes,
set `scale` on the [theme](https://mantine.dev/llms/theming-theme-object.md) to the value of `1 / htmlFontSize`.

For example, if you set the `html` font-size to `10px` and want to scale Mantine components accordingly, you need
to set `scale` to `1 / (10 / 16)` (16 – default font-size) = `1 / 0.625` = `1.6`:

```css
:root {
  font-size: 10px;
}
```

```tsx
import { createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  scale: 1.6,
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

## em units

`em` units are used in media queries the same way as `rem` units, but they are not affected by the font-size specified on the `html`/`:root` element.
`1em` is considered to be `16px`.

## px conversions

You can use numbers in some Mantine components props. Numbers are treated as `px` and converted to `rem`, for example:

```tsx
import { ColorSwatch } from '@mantine/core';

function DemoPx() {
  // Specify ColorSwatch size in px, it will be automatically converted to rem
  // Width and height of ColorSwatch in this case will be 32px / 16 = 2rem
  return <ColorSwatch color="#000" size={32} />;
}

function DemoRem() {
  // This demo will have the same size as previous one
  return <ColorSwatch color="#000" size="2rem" />;
}
```

The same conversion happens in [style props](https://mantine.dev/llms/styles-style-props.md):

```tsx
import { Box } from '@mantine/core';

function Demo() {
  // width: calc(2rem * var(--mantine-scale))
  // height: calc(1rem * var(--mantine-scale))
  return <Box w={32} h={16} />;
}
```

## rem and em function

`@mantine/core` package exports `rem` and `em` function that can be used to convert `px` into `rem`/`em`:

```tsx
import { em, rem } from '@mantine/core';

// numbers and values in px are converted to rem
rem(32); // -> calc(2rem * var(--mantine-scale))
em(32); // -> 2em
rem('16px'); // -> calc(1rem * var(--mantine-scale))
em('16px'); // -> 1em

rem('2rem'); // -> 2rem
em('2rem'); // -> 2rem

rem('50%'); // -> 50%
em('50%'); // -> 50%

rem('5vh'); // -> 5vh
em('5vh'); // -> 5vh

// mixed values are converted to rem
rem('16px 2rem'); // -> calc(1rem * var(--mantine-scale)) 2rem
```

## Convert rem to px

To convert `rem`/`em` to `px` use `px` function exported from `@mantine/core`:

```tsx
import { px } from '@mantine/core';

px('2rem'); // -> 32
px('10rem'); // -> 160
```

## rem/em functions in css files

You can use `rem` and `em` function in [css files](https://mantine.dev/llms/styles-css-modules.md) if
[postcss-preset-mantine](https://mantine.dev/llms/styles-postcss-preset.md) is installed:

```css
.demo {
  font-size: rem(16px);

  @media (min-width: em(320px)) {
    font-size: rem(32px);
  }
}
```

## Convert px to rem automatically in css files

To convert `px` to `rem` automatically in css files, enable `autoRem` option in
[postcss-preset-mantine](https://mantine.dev/llms/styles-postcss-preset.md) configuration:

```js
module.exports = {
  plugins: {
    'postcss-preset-mantine': {
      autoRem: true,
    },
  },
};
```