媒体查询问题- CSS

qv7cva1a 于 2023-04-01 发布在其他

关注(0)|答案(1)|浏览(115)

我刚接触HTML和CSS，在处理媒体查询时遇到了一些问题。基本上，我有一个网站，只有在1920x1080分辨率下可视化时才“实际工作”，所以我在我的css上创建了一些媒体查询来支持其他分辨率。我在制作一个媒体查询来支持1280x1024px分辨率时遇到了一点麻烦。当浏览器不是全屏的时候，在窗口模式下，我在css中所做的任何修改都不会被应用，但是当我全屏的时候，一切都运行的很好。
此外，我不能设置1280宽度，因为它会搞乱我的其他媒体查询，这是为1280x768分辨率创建的
有人能帮我吗？谢谢。

@media screen and (height:1024px) {
.white_round_background{
 margin-left: 320px;
 height: 170vh;
 width: 160vw;
 background-color: rgb(197, 183, 183);
 }

.menunav {
left: 38%;
top: 4%;
}

.system_selection {
 margin: 420px 0 0 0px;
 height: 95px;
 }

#logo_sliding_menu {
margin-top: 710px;
}

}

css

来源：https://stackoverflow.com/questions/73392386/media-queries-issue-css

1条答案

按热度按时间

oug3syen1#

嗯...在这一点上只是一个猜测，但要注意：CSS代码的顺序很重要。
你可以有很多媒体查询定义，但是它们必须按照特定的顺序（从最高到最低）。例如：

@media only screen and (max-heigth: 600px) {}

只有到那时

@media only screen and (max-width: 500px){}

此外，除了指定高度外，还可以尝试使用max-height属性（该属性适用于分辨率小于该高度的设备。因为仅针对1024 px的一个高度在高度为1023 px或更小或1025 px或更大的窗口上不起作用...

.yourClass {
 /* CSS applied to all devices above 1024px height */
}
@media only screen and (max-width: 1024px){
  .yourClass {
     /* CSS applied to all devices smaller than 1024px height */
  }
}
@media only screen and (max-width: 955px){
  .yourClass {
     /* CSS applied to all devices smaller than 955px height */
  }
}
@media only screen and (max-width: 500px){
  .yourClass {
     /* CSS applied to all devices smaller than 500px height */
  }
}
/* And so on */

你也可以在同一个查询中使用min-height和max-height：

@media screen and (min-height: 400px) and (max-height: 900px)
{
  .yourClass {
    /* CSS applied to all devices 
    no less than 400px height and no more than 900px height */
  }
}

赞(0）回复(0）举报 2023-04-01

我来回答

媒体查询问题- CSS

1条答案

相关问题

热门标签

最新问答