reactjs HTML,SCSS,JSX,React,灵活网格

gzszwxb4  于 2023-10-17  发布在  React
关注(0)|答案(1)|浏览(99)

我需要这种方法使用灵活的网格方法,用户在768像素和1024像素的媒体屏幕应该能够查看确切的输出,如这里,并在移动的应用程序视口应该是一列的方法使用jsx和scss代码派生此代码。谢谢你
我尝试使用网格方法,但使用translate和transform我获得了位置,但它并不有效,就像我已经重做了整个代码,分别为712px和768px,这是有点可怕,在获得实际输出,因为它是。

aydmsdu9

aydmsdu91#

无论你使用Flex还是Grid。对于响应式设计,您应该使用以下方法之一。

  • 使用media-query,这是CSS3中引入的一种CSS技术,并更改每个分辨率的CSS属性。在this link上介绍的此技术的详细信息
  • 考虑到您提到的JSX,您可以针对各种设备设计组件,并通过识别用户的屏幕大小来渲染相应的组件。您可以使用innerWidth来获取用户屏幕的宽度。
window.innerWidth

另一种实施方法是“移动优先”。因此,您的整个布局将呈现为桌面,但在更大的尺寸。请记住,您应该避免使用像素或任何固定值。

相关问题