如何在 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;
}
`;