如何解决有响应的布局问题？
提问于 2022-07-31 10:22:36
我有问题，我使用这段代码来响应布局。在我的计算机中，当我使用编程工具观察我的代码在电话大小时，它看起来很完美，但是当我部署它时，这一点都不起作用。我不明白为什么，因为我在另一个子页面中有相同的代码，而且它在那里工作得很好。
import MediaQuery, { useMediaQuery } from "react-responsive";
const Phone = useMediaQuery({
query: "(max-width: 641px)"
});
<Card style={{ width: Phone ? '100%' : "32%", float: "left", backgroundColor: "#003263", height: "380px"}} >
回答 1
Stack Overflow用户
发布于 2022-09-10 21:33:04
你好，我有同样的问题，我寻找了几个解决方案，但我最终使用的材料UI。
import React from 'react'
import useMediaQuery from '@mui/material/useMediaQuery'
const ProductCard = ({ name, category, description, tech, url, image, color }) => {
const isMobile = useMediaQuery('(max-width: 786px)')
return (
<div style={{ margin: isMobile ? '0px' : '18px' }}>
<p>{name}</p>
<p>{category}...</p>
</div>
)
}
export default ProductCard
它工作得非常好，在第一个渲染中，它正确地检测到变量并使css发生变化，但是您必须安装MUI。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73185898
复制相关文章
![Selenium：Chrome、Edge、Firefox、Opera、Safari常用WebDriver下载安装[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/7d5b26c5493876503114f2df2144276c.png)
点击加载更多
腾讯云开发者
