# Responsive Styles

Blockstack UI supports responsive styles out of the box because it is built with styled-system. Instead of manually adding
`@media` queries and adding nested styles throughout your code, any component allows
you provide array values to add mobile-first responsive styles.

> We use the `@media(min-width)` media queries to ensure values are
> mobile-first.

```jsx live=false
<>
  <Box
    height="40px"
    bg="ink.400"
    width={[
      "100%", // base
      "50%", // 480px upwards
      "25%", // 768px upwards
      "15%" // 992px upwards
    ]}
  />
  // responsive font size
  <Box fontSize={[0, 2, 4, 6]}>Font Size</Box>
  // responsive margin
  <Box mt={[2, 4, 6, 8]} width="full" height="24px" bg="salmon" />
  // responsive padding
  <Box bg="whitesmoke" p={[2, 4, 6, 8]}>
    Padding
  </Box>
</>
```

This works for every style props in the theme specification, which means you can
change the style of most properties at a given breakpoint.

## What it does

This shortcut is an alternative to writing media queries out by hand. Given the
following:

```jsx live=false
<Box width={[1, 1 / 2, 1 / 4]} />
```

It'll generate a CSS that looks like this

```css
.Box {
  width: 100%;
}

@media screen and (min-width: 40em) {
  .Box {
    width: 50%;
  }
}

@media screen and (min-width: 52em) {
  .Box {
    width: 25%;
  }
}
```

The equivalent of this style if you passed it as an object.

```js
// First, create an alias for breakpoints
const breakpoints = ["30em", "48em", "62em", "80em"];
// aliases
breakpoints.sm = breakpoints[0];
breakpoints.md = breakpoints[1];
breakpoints.lg = breakpoints[2];
breakpoints.xl = breakpoints[3];
```

then

```jsx live=false
<Box width={{ base: 1, sm: 1 / 2, md: 1 / 4 }} />
```

## Demo

Here's a simple example of a marketing page component that uses a stacked layout
on small screens, and a side-by-side layout on larger screens **(resize your
browser to see it in action)**:

```jsx
<Box p={4}>
  <Box color={["blue", "red", "green"]}>
    This will change color depending on screen size!
  </Box>
</Box>
```
