为什么在devtools“切换设备工具栏”模式下工作的媒体查询在Chrome浏览器中不起作用？

Question

There is no problem when examining the part of my code related to media query in devtools " toggle device toolbar " mode. But after closing the preview, I found that the code didn't work in browser. Why is this happening? I think it's related to Chrome browser. Because my code is working properly in Firefox.

// Main CSS

div#top-header {
    grid-area: theader;
    background-color: #FA6938;
    display: flex;
    padding: 0 5px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
}

// This is still working

@media screen and (min-width: 600px) { div#top-header { padding: 0 15px; } }

// This code is running in "toggle device toolbar" mode but not running when I close the preview

@media screen and (min-width: 1120px) { div#top-header { padding: 0 14%; } }

Answer 1

Do you have

<meta name="viewport" content="width=device-width">

In the 'head' of your html ?