css 移动的设备无法使用媒体查询

nimxete2  于 2022-12-24  发布在  其他
关注(0)|答案(2)|浏览(201)

所以我尝试使用媒体查询,它只是不工作的设备与800+像素的高度。

@media only screen and (max-width:600px) {
  .logo {
   display: inline-block;
    position: sticky;
    color: white;
    font-size: 4vw;
    margin-top: 2.7vw;
 }

 .lista{
   text-decoration: none;
   position: sticky;
   color: white;
   padding-bottom: 7px;
   transition: .1s all linear;
   font-size: 3vw;
   display: inline-block;
   font-weight: bold;
 }

  header ul.navigace{
   float: right;
   margin-top: 3vw;
   word-spacing: 1vw;
 }

  header{
   background: rgb(31, 9, 110);
   position: sticky;
   height: 9vw;
 }

我甚至试着设置最大高度之类的东西,但它不起作用。

bzzcjhmw

bzzcjhmw1#

如果你只想在移动的设备上使用它,这个宽度应该最大为767px(就像你所做的那样)。但是,如果你想为平板电脑和桌面设备定制它,你可以给予一定的范围。用下面的代码可以实现这一点。

@media only screen and (min-width: 768px) and (max-width: 1023px) {..}

dced5bon

dced5bon2#

如果你想在800 + px的高度使用媒体查询,那么你必须像@media (min-height:800px){}那样做你的代码在你的代码中,你没有在结尾处关闭括号“}”,这就是为什么它不起作用

相关问题