响应式布局切换时第一步元素随页面移动的原因排查

我正在学习HTML、CSS和Sass，在Chrome浏览器中调整响应式布局时，‘Choose a restaurant’元素会随页面一同移动。想请教这是HTML布局、CSS中的Flex还是Media Query导致的问题？

我用到的Sass媒体查询代码： #

@media only screen and (min-width:800px) {

    .container--body,
    #restaurants {
        padding: 0px 50px;
    }

    .steps {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 307px;
    }

    body {
        padding: 0px;
    }

    .hero-title__margin {
        width: 100%;
        margin-top: 10px;
        margin-left: 172px;
        padding-left: 0px;
    }

    .container--body {
        gap: 15px;
        margin: 20px 0px 25px 0px;
}

问题原因及解决办法 #

问题出在Media Query里的固定像素margin设置，和Flex、HTML布局无关。你给.hero-title__margin设置了margin-left: 172px，这是固定像素值——当页面宽度在800px以上调整时，这个固定的左边距不会跟着页面宽度比例变化，导致元素看起来“跟着页面移动”。

解决办法很简单：把固定像素值换成相对单位，比如百分比或者vw（视窗宽度单位），比如改成margin-left: 15%，或者用calc(10% + 20px)这种混合方式，让左边距能随页面宽度自适应调整。

内容的提问来源于stack exchange，提问作者Travis