卡片在不同的移动设备上看起来不一致

Question

我正在尝试通过设计一些组件来提高我的 CSS 技能。这里，我在HTML、CSS、JS中设计了一个文章预览组件。但该卡在某些设备上看起来很小，而且余量太大。但在其他设备上，它看起来不错。

如何消除这种不一致？

代码沙箱 link : https://codesandbox.io/s/gallant-shamir-g3zui

在不同的移动模拟器上附上几张截图

Answer 1

您已将附加到主要元素的卡片 class 设置为 styles.css 中的固定宽度（宽度：327 像素；）。使用宽度和高度的百分比来获得响应式网页。