css媒体查询正确的大小

Question

我正在使用媒体查询开发网站。我正在使用的是这些：

@media screen and (min-width: 1300px){
@media screen and (min-width: 1024px) and (max-width: 1299px){
@media screen and (min-width: 980px) and (max-width: 1199px){
@media screen and (min-width: 768px) and (max-width: 979px){

我遇到的问题是笔记本电脑中有某些屏幕分辨率使屏幕看起来像这样：

如你所见。导航部分与主徽标重叠，字母和底部覆盖主导航菜单。这基本上发生在具有非常大的宽度和小高度的笔记本电脑屏幕上。有什么办法可以用媒体查询来定位这个解决方案吗？

Answer 1

你有这个：

@media screen and (min-width: 1300px){
@media screen and (min-width: 1024px) and (max-width: 1299px){
@media screen and (min-width: 980px) and (max-width: 1199px){
@media screen and (min-width: 768px) and (max-width: 979px){

你可以另外做这样的事情：

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

然后将您需要的元素放在媒体查询中。您可以根据需要添加任意数量的媒体查询，并仅定位您需要的元素。

现在可能为时已晚，但我建议您仅在将来使用min-width进行大多数媒体查询，这样您就无法复制一些相同的代码。