在 React 中处理媒体查询的另一种方式
在 React 中处理媒体查询的另一种方式
在当今世界，手机、笔记本电脑和台式机等电子产品具有各种尺寸和外形。没有人进行并且每个人都意识到的研究表明，当网站的响应式设计不佳时，流量会减少 80%。因此，处理适当的媒体查询应该是任何网站的首要任务。
在本文中，我想展示如何使用修复断点正确处理 React 项目中的媒体查询。与其随机破坏每个反应组件中的媒体查询，不如使用一个常量，然后在每个组件中导入它，如下所示：
导出常量大小= {
xxs：'375'，
xs: '480',
sm: '576',
MD：'768'，
lg: '992',
minWidthHeader: '1050',
XL: '1200',
smallDesktop: '1366',
xxl: '1600',
}
现在，使用 style-component 聚合和创建 css 的好方法如下例所示：
从 'styled-components/macro' 导入 { css, CSSObject }
接口尺寸{
xxs：字符串；
xs：字符串；
sm：字符串；
md：字符串；
lg：字符串；
minWidthHeader：字符串；
xl：字符串
小桌面：字符串；
xxl：字符串；
} 导出常量大小：ISizes = {
xxs：'375'，
xs: '480',
sm: '576',
MD：'768'，
lg: '992',
minWidthHeader: '1050',
XL: '1200',
smallDesktop: '1366',
xxl: '1600',
} 导出常量媒体 = Object.keys(sizes).reduce( （累加器：记录<string, Function>，标签：字符串）=> { const pxSize: string = sizes[label as keyof ISizes] 累加器[标签] = (args: CSSObject) =>css`
@media（最大宽度：${pxSize}px）{
${css(args)}
}
`
返回蓄能器；
}, {}
)
最后，您可以导入“媒体”功能并使用它，如下图所示：
从“样式组件”导入样式；
从“../../styles/media”导入{媒体}； const Wrapper = styled.div`
显示：网格；
网格模板列：1fr 1fr 1fr 1fr；
网格间隙：10px；
& > 分区{
宽度：300px；
边框：1px 实心；
高度：300px；
背景颜色：粉红色；
}
${媒体.md`
网格模板列：1fr 1fr；
`}
${媒体.sm`
宽度：100%；
网格模板列：1fr；
`}; `; 常量主页 = () => { 返回 （ <Wrapper>
<div>第 1 列</div>
<div>第 2 列</div>
<div>第 3 列</div>
<div>第 4 列</div>
</Wrapper>
)}; 导出默认主页；
如果您想查找参考，这里是此代码的存储库 https://github.com/viveksharmapoudel/clean-media-query .
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
