Question

我做了一个部分，并且html标签和body标签就是这样

HTML Tag

Body Tag [Section Tag]（http://prntscr.com/oekku9）

该部分也没有获取尺寸

实时版本：https://codesandbox.io/s/thirsty-thunder-mu1ss

我想使产品位于中心位置

Answer 1

这是我的解决方法CodeSandbox

基本上，问题出在您的标头组件中，

在小型设备上，导航按钮没有堆叠在一起，这使页眉比屏幕宽度宽。

通过添加解决了导航按钮的堆叠问题

@media (max-width: 400px) {
    flex-direction: column;
}

包括其他较小的修复程序，删除标头上的大填充padding: 6.9rem 31.9rem;，并在小型设备上将其替换为15px填充

还删除了小屏幕上各个导航按钮的左边距

要使产品在中心对齐，请评论

@media screen and (max-width: 400px) {
    /* align-items: flex-start; */  comment this line 
    justify-content: center;
    flex-direction: column;
}

来自 product / styles>容器

这条特殊线是在小型设备上将您的产品向左对齐

容器问题-React和样式化组件

1 个答案: