HTML、SCSS、JSX、React、灵活网格

Question

我需要使用灵活的网格方法，其中 768px 和 1024px 媒体屏幕的用户应该能够查看此处的确切输出，并且在移动应用程序视口上，它应该采用列方法，使用 jsx 和 scss 代码派生此代码。谢谢你

我尝试使用网格方法，但使用平移和变换我获得了位置，但它并不有效，就像我分别为 712px 和 768px 重做整个代码一样，这在获得实际输出方面有点糟糕。

Answer 1

无论你使用flex还是grid都没有关系。 对于响应式设计，您应该使用以下方法之一。

• 使用CSS3中引入的CSS技术media-query并进行更改 每个分辨率的 CSS 属性。 此链接
介绍了该技术的详细信息
• 考虑到您提到的JSX，您可以设计组件 各种设备并通过识别来渲染相应的组件 用户的屏幕尺寸。您可以使用innerWidth 来获取用户屏幕的宽度。

  窗口.innerWidth
  

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