스타일이 지정된 구성 요소가 있는 미디어 쿼리

When writing media queries in styled-components I follow these three steps, and I can only recommend this approach.

1. Define breakpoints based on application needs.
2. Define devices using media query syntax.
3. Apply the media query in the styled component.

The first step should be a definition of the supported screen sizes in your application. As the needs in applications are different, a good starting point are the standard breakpoints in Google Chrome Dev Tools. Add or subtract breakpoints as for your specific need.

Let's create an object which holds the sizes.

const sizes = {
  mobileS: '320px',
  mobileM: '375px',
  mobileL: '425px',
  tablet: '768px',
  laptop: '1024px',
  laptopL: '1440px',
  desktop: '2560px',
};

Based on the sizes we can create a media query for each supported device. We can improve readability of the code, when using ES6 template strings.

export const devices = {
  mobileS: `(min-width: ${sizes.mobileS})`,
  mobileM: `(min-width: ${sizes.mobileM})`,
  mobileL: `(min-width: ${sizes.mobileL})`,
  tablet: `(min-width: ${sizes.tablet})`,
  laptop: `(min-width: ${sizes.laptop})`,
  laptopL: `(min-width: ${sizes.laptopL})`,
  desktop: `(min-width: ${sizes.desktop})`,
};

To apply the media query in a styled component just add it to the styling. Let's consider the following application.

const App = () => (
  <ProfilePage>
    <Card>
      <ProfileImg />
      <ProfileText />
    </Card>
  </ProfilePage>
);

This is a pseudo-code of a profile page. The page should be responsive. The ProfilePage should have a different maximum width on laptop and desktop, and the Card should have the ProfileText below the ProfileImage on small devices.

import styled from 'styled-components';
import { device } from './device';

const ProfilePage = styled.div`
  margin: auto;
  text-align: center;

  @media ${device.laptop} {
    max-width: 800px;
  }

  @media ${device.desktop} {
    max-width: 1400px;
  }
`;

For moving the text under the image in the Card component, flex-direction can be of help. When developing a web application starting with the smallest supported screen is always helpful.

const Card = styled.div`
  display: flex;
  flex-direction: column;
  margin: 0.5rem;

  @media ${device.laptop} {
    flex-direction: row;
  }
`;

YaY , 🥳🥳🥳. That's it. Requirements fulfilled.

• Media queries with styled components just work the same as in good old CSS!