如何解决根据屏幕宽度重复或不重复贝克背景图像
我正在开发一个网页,遇到了问题。我有一个(可重复的)背景图片,在高达1200px的屏幕上看起来不错,但是在宽得多的屏幕(> 1600px +左右)上效果不佳。我想根据屏幕宽度设置重复次数。怎么办?
谢谢!
解决方法
如前所述,在询问此类问题时应提供您的代码。您需要CSS media queries:
/* for 1200px+ */
@media screen and (min-width: 1200px) {
.myImageSelector: {
background-repeat: repeat;
}
}
/* for everything else */
.myImageSelector: {
background-repeat: no-repeat;
}
,
如果您不想使用css,您可以知道组件渲染时的屏幕宽度。首先,您要像这样初始化状态:
auto.arima
然后,您也可以使用它来收听调整大小。
const [
windowSize,setWindowSize,] = useState({
width: 0,height: 0,})
完成此操作后,状态即为您网页的内部宽度。这样,您就可以使用useeffect来监听更改并相应渲染任何内容。
useLayoutEffect(() => {
const updateSize = () => {
setWindowSize({
...windowSize,height: window.innerHeight,width: window.innerWidth,})
}
window.addEventListener(`resize`,updateSize)
updateSize()
return () => window.removeEventListener(`resize`,updateSize)
},[])
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。