如何在 Styled-Components 中使用 CSS 媒体查询断点

在 Styled-Components 中创建和使用断点

步骤 1：创建 breakpoints.js 并定义大小、设备变量
您可以更改断点大小并添加新大小。

const size = {
 xs: ‘320px’,
 sm: ‘768px’,
 lg: ‘1200px’,
}
const device = {
 xs: `(min-width: ${size.xs})`,
 sm: `(min-width: ${size.sm})`,
 lg: `(min-width: ${size.lg})`
}
export default {size, device}

步骤 2：在 Styled-Components 中使用此断点

import breakpoint from 'Commons/breakpoints';
...
const Component = styled.div`
    @media only screen and ${breakpoint.device.xs}{
        display: none;
    }
    @media only screen and ${breakpoint.device.sm}{
        display: flex;
    }
    @media only screen and ${breakpoint.device.lg}{
        display: flex;
    }
`;

文章来源：https://dev.to/cagatayunal/how-to-use-css-media-query-breakpoint-in-styled-components-9of