Question

我有点困惑，因为我习惯使用媒体查询做一些CSS ...我之前从未遇到过这个问题。只有第一个媒体查询运行良好...我几乎没有媒体查询处理这样的细节大小：

@media screen and (max-width:screen-sm-max)

我尝试使用和不使用px参数...我甚至无法弄清楚为什么我的代码运行不正常... 我在这方面看了几个主题，但它对我没有帮助......

感谢您的帮助： - ）

修改

我第一次使用Bootstrap，是否会改变媒体查询的内容？

编辑2：

当我们使用Bootstrap时，我看到navigator.camera.getPicture( onSuccess, onFail, { quality: 40, destinationType: Camera.DestinationType.FILE_URI, sourceType : Camera.PictureSourceType.CAMERA } );之类的东西，我应该使用它而不是function onSuccess(imageURI) { window.resolveLocalFileSystemURL(imageURI, function (fileSystem) { fileSystem.file(function (file) { fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1); saveValueToDb(fileName, imageURI, file.type, file.size);//in saveValueToDb() I save this datas to websql }); }); } function onFail(message) { console.log('Failed because: ' + message); }值吗？我认为它仍然会一样......

Answer 1

首先尝试放置最小的@media查询宽度代码块。

/* - PHONE PORTRAIT - */
@media screen and (max-width: 450px) and (orientation: portrait){
  /*...*/
}

/* - PHONE LANDSCAPE - */
@media screen and (max-width: 750px) and (orientation: landscape){
  /*...*/
}

/* - IPAD PORTRAIT - */
@media screen and (max-width: 768px) and (orientation: portrait){
  header{
    background-size: 28vw 30vh, 34vw 38vh;
    background-position: right 28vw top 3.5vh, right 17vw top 1vh;
  }
  header object{
    left:10vw;
    width:24vw !important;
  }
  header p{
    font-size:20px;
    top:10vh;
    left:-2vw;
  } 
}

/* - IPAD LANDSCAPE - */
@media screen and (max-width: 1024px) and (orientation: landscape){
  header{
    background-size: 28vw 30vh, 34vw 38vh;
    background-position: right 24vw top 3.5vh, right 21vw top 1vh;
  }
  header object{
    left:16vw;
    width:18vw !important;
  }
  header p{
    font-size:14px;
    top:16vh;
    left:-2vw;
  }
}

它为我解决了这类问题。 Boostrap doc也遵循这种结构。（这里@ screen-sm-min是你可以设置的变量，感谢LESS / SASS，但你不能用固定数字替换它）

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

我个人会使用类似的东西，如果它可以帮助你：

@media (max-width:767px) {}

@media (max-width:767px) and (orientation:landscape) {}

@media (min-width:768px) and (max-width:991px) {}

多个媒体查询无效

1 个答案: