html - 如何正确使用@media 查询？

Question

我当前的网站布局:Screenshot 1

我使用了一个带有环绕 id 的 div 来使网站居中:

#wrap {
width: 70%;
margin: 0 auto; 
}

但现在它显然也使它在移动设备上的宽度达到 70%，这看起来很糟糕:SC2

我确实尝试过使用媒体查询，它自己指定了 max-device-width 以及 Bootstrap 网站上 CSS 部分下的媒体查询，每次我使用其中任何一个时，我都会删除原始的 #wrap css 代码，但没有任何效果，我的网站只会在所有设备上达到 100%，即使我在移动设备上达到 70%(只是作为测试)它仍然到处都是一样的，就像没有 css 代码一样完全包装 id。

抱歉，如果这是一个愚蠢的问题，我只是迷路了，真的想让我的网站在某个(平板电脑-移动)断点处 100%。

Answer 1

试试这个:-

@media (min-width: 768px)  {
    .mymenu {
      width: 20%;
    }
}