Всем привет!
Media Queries в styled components работают точно так же, как и в обычном CSS.
const CardWrapper = styled.div`
display: flex;
flex-direction: row;
@media (max-width: 768px) {
flex-direction: column;
}
`;Ниже рассмотрим небольшой пример.
Что мы сделаем?
Сделаем простую страницу, которая будет адаптироваться под размер экрана устройства.
Код можно посмотреть на Code Sandbox.
Как сделать страницу адаптивной используя styled components?
- Нужно определить брейкпоинты в JS объекте
- Определеить девайс для каждого брейкпоинта используя обычный media queries синтаксис
- Применить правила @media в styled components
#1 Определяем брейкпоинты и девайсы
Определим брейкпоинты:
const size = {
mobileS: '320px',
mobileM: '375px',
mobileL: '425px',
tablet: '768px',
laptop: '1024px',
laptopL: '1440px',
desktop: '2560px'
}Затем создадим правило media query для каждого девайса.
export const device = {
mobileS: `(min-width: ${size.mobileS})`,
mobileM: `(min-width: ${size.mobileM})`,
mobileL: `(min-width: ${size.mobileL})`,
tablet: `(min-width: ${size.tablet})`,
laptop: `(min-width: ${size.laptop})`,
laptopL: `(min-width: ${size.laptopL})`,
desktop: `(min-width: ${size.desktop})`,
desktopL: `(min-width: ${size.desktop})`
};#2 Сделаем компоненты адаптивными
Приложение имеет следующую корневую структуру:
const App = () => (
<Page>
<Hello name="CodeSandbox" />
<Card withPictureOf="cats" />
<Card withPictureOf="coffee" />
<Card withPictureOf="oranges" />
</Page>
);Чтобы компоненты стали адаптивными, нужно обновить:
- <Page> должен иметь максимальную ширину (width)
- <Card> должен отображать текст под картинкой на небольших экранах
Для <Page> мы можем легко добавить max-width в зависимости от девайса:
import styled from 'styled-components';
import { device } from './device';
const Page = styled.div`
margin: auto;
font-family: "sans-serif";
text-align: center;
@media ${device.laptop} {
max-width: 800px;
}
@media ${device.desktop} {
max-width: 1400px;
}
`;А для <Card> нужно обновить flex-direction:
import { device } from './device';
const CardWrapper = styled.div`
display: flex;
// Mobile friendly by default
flex-direction: column;
border: 1px solid gray;
box-shadow: 5px 5px #ccc;
padding: 10px;
margin: 10px;
// Switch to rows on large devices
@media ${device.laptop} {
flex-direction: row;
}
`;Вот и все!
Теперь страница корректно подстраивается под наш девайс.
Остались вопросы? Спрашивайте в комментариях!
Вольный перевод статьи.
Оригинал статьи: ссылка
