项目 41/100 - 使用 JSX 编写响应式 CSS

嘿！我的任务是截止 3 月 8 日，完成 100 个 React.js 项目。请关注我的 dev.to 个人资料或推特获取最新动态，如有任何问题，请随时联系我。感谢您的支持！

今天部署的应用程序链接：链接
仓库链接：github

这是一个简短的项目，紧随客户网站初稿的完成。该网站已针对移动设备进行了优化，但我们只想添加一些样式，以便桌面用户也能轻松理解。主要的挑战在于静态背景图片元素，上面写着（西班牙语解释）“更多内容即将推出”。

对于移动端屏幕，我原本想利用background-size: coverCSS 属性来简单地覆盖空间。但在较大的屏幕上，这样做可能会显得有些奇怪，因为可能只有一小部分图像能够显示出来。

在纯 CSS 中，这可以通过媒体查询轻松解决。只需指定要优化的屏幕尺寸（例如宽度超过 570px），并在括号内设置样式即可。

在这个项目中，我实际上利用了props将图片 URL 传递给组件，以便组件可复用。由于我background在 JSX 中设置了 CSS 属性，它会覆盖实际样式表中的一些其他样式。

CSS 已加载到

相反，我们可以使用 Javascript 通过对象的以下内置原始 Javascript 属性来检查屏幕尺寸window：

window.innerWidth

此属性返回窗口的内部宽度，从而允许您为不同的屏幕尺寸设置样式。

问题是什么？这个属性在页面加载时只会调用一次。坦白说，对于移动设备来说，这没什么问题，但如果有人在浏览器上查看它，并决定调整窗口大小并将其推到一边，它就不会再被调用了。为了在窗口大小调整时再次调用该属性，我们利用了该window.onresize方法的回调。我使用 ReactuseState将 windowWidth 变量设置为页面加载时以及每次屏幕大小调整时屏幕的大小。

  const [windowWidth,setWindowWidth] = useState(0);

  window.onresize = () => {
    setWindowWidth(window.innerWidth);
  }

现在我们有一个变量，只要屏幕尺寸发生变化，它就会更新，我们可以创建单独的样式对象传递给每个屏幕尺寸的 JSX 元素，就像这里，我使用三元组：

  const innerImageStyle = windowWidth < 570 ?
   ({
    width: '100%',
    height: '80vh',
    backgroundImage: `url(${props.imageUrl})`,
    backgroundSize: 'cover',
  }) : 
   ({
    width: '100%',
    height: '500px',
    backgroundImage: `url(${props.imageUrl})`,
    backgroundSize: 'contain',
  });

如您所见，如果是移动设备（宽度小于 570 像素），我们希望背景覆盖所有可用空间。如果是台式电脑，我们希望背景重复显示（这是客户的选择，但我喜欢）。

我确信我们也可以使用 React useEffect hook 来做到这一点，但这只是一个简单的版本，老实说，我觉得内置的 Javascript 窗口方法被低估了，而且它们的强大功能没有得到充分的传授。

请在评论中告诉我您的想法以及如何对 React 组件进行条件样式设置...