防止在使用媒体查询时应用某些 css 元素

Question

我目前正在尝试使我的网站具有响应性，但我不知道如何继续。 我有一个带有<ul>和<li>标签的导航栏，我在 css 中设置了一些 arguments。 我的问题是，当我在网站上达到一定宽度时，是否能够禁用这些 arguments。

Answer 1

是的，当然。 您可以使用媒体查询为您的布局和界面创建合理的断点。 这些断点主要基于视口宽度：例如：

 // Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { li { padding: 0.5rem 0; &:first-child { padding-top: 0; } } } // Small devices (landscape phones, less than 768px) @media (max-width: 767.98px) { li { padding: 1rem 0; &:first-child { padding-top: 1rem; } }} // Medium devices (tablets, less than 992px) @media (max-width: 991.98px) {... } // Large devices (desktops, less than 1200px) @media (max-width: 1199.98px) {... } // Extra large devices (large desktops) // No media query since the extra-large breakpoint has no upper bound on its width