css媒体查询不是针对iPhone的

问题描述：

我有我的css文件的问题。这些样式不适用于iPhone，而是我将iPad查询应用于iPhone和iPad。我检查并检查了拼写错误，找不到任何。下面是两个iPad和iPhone查询我的CSS文件：css媒体查询不是针对iPhone的

CSS

/*MEDIA-QUERIES-iPAD////////////////////////////////////////////////////////////////////////////////*/ 

    @media screen and (min-width: 768px) and (max-width: 1024px) { 

     body, 
     html { 
      position: fixed;} 

     #menu {display: none;} 


     #presentacion { 
      padding: 0; 
      position: fixed; 
      display: inline-block; 
      text-align: center; 
      top: 30%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
     } 

     .buttons { 

      opacity: 1; 

     } 

     #previous { 


      background-position: 70px 45%; 
      -webkit-tap-highlight-color: transparent; 
      left: -90px; 
      width: 25%; 
      height: 100%; 
      z-index: 4; 
      position: absolute; 
     } 

     #next { 


      background-position: 110px 45%; 
      -webkit-tap-highlight-color: transparent; 
      right: -90px; 
      width: 25%; 
      height: 100%; 
      z-index: 4; 
      position: absolute; 
     } 

     #info { 

      font-size: 2em; 

     } 

     h1 { 
       line-height: 8vh; 
       font-size: 2.1em; 
     } 


     ul { 
      margin-right: 2em; 
     } 

     #front { 
      height: 750px; 
     } 

     #imagewrap { 

      top: 10%; 
      display: block; 
      margin: 0 auto; 
      width: 80%; 
      height: 80%; 
     } 

     #front { 
      background-color: red; 
     } 

     #header { 
      height: 8vh; 
     } 

     .sections { 
      width: 900px; 
      height: 500px; 
      margin: 0 auto; 
      overflow-y: hidden; 
      top: 5%; 
      padding: none; 
     } 

      .sections p { 
      font-family: Galliard; 
      display: block; 
      font-size: 1.1em; 
      line-height: 2em; 
      margin-bottom: 2em; 
      padding-right: 100px; /*important*/ 
      padding-left: 100px; /*important*/ 
      color: #666; 
      text-align: left; 
     } 

     #about.sections { 
      height: 650px; 
     } 

     #about.sections p { 
      padding-left: 125px; 
      padding-right: 125px; 
     } 

     .littleImages { 
      height: 125px; 
      width: 125px; 
      margin: 15px; 
      box-shadow: 0px 0px 15px 5px #dcdcdc; 
     } 


    } 

    /*MEDIA-QUERIES-iPHONE////////////////////////////////////////////////////////////////////////////////*/ 

    @media screen and (min-width: 375px) and (max-width: 767px) { 


     #front { 
      z-index: 6; 
      margin: 50% auto 0; 
      height: 85%;} 

     #container { 
      position: relative; 
      height: 100vh; 
      width: 100vw; 
      background-color: green; 
      overflow-y: scroll; 
      text-align: center; 
     } 


     #imagewrap { 
      margin-top: 400px; 
     } 

     #header { 
      height: 20vh; 
      background-color: red; 
     } 

     .sections { 
      width: 900px; 
      height: 650px; 
      margin: 0 auto; 
      overflow-y: hidden; 
      top: 15%; 
      padding: 50px 50px 50px 50px; 
     } 

      .sections p { 
      font-family: Galliard; 
      display: block; 
      font-size: 1.1em; 
      line-height: 2em; 
      margin-bottom: 2em; 
      padding-right: 100px; /*important*/ 
      padding-left: 100px; /*important*/ 
      color: #666; 
      text-align: left; 
     } 

     .buttons { 

      opacity: 1; 

     } 


     #info { 

      font-size: 2em; 

     } 

     #about.sections { 
      height: 650px; 
     } 

     #about.sections p { 
      padding-left: 125px; 
      padding-right: 125px; 
     } 

     .littleImages { 
      height: 125px; 
      width: 125px; 
      margin: 15px; 
      box-shadow: 0px 0px 15px 5px #dcdcdc; 
     } 

      #previous { 

       background-position: 70px 45%; 
       -webkit-tap-highlight-color: transparent; 
       left: -90px; 
       width: 25%; 
       height: 100%; 
       z-index: 4; 
       position: absolute; 
      } 

      #next { 


       background-position: 110px 45%; 
       -webkit-tap-highlight-color: transparent; 
       right: -90px; 
       width: 25%; 
       height: 100%; 
       z-index: 4; 
       position: absolute; 
      } 

    }

我没有看到任何明显的拼写错误或错误，会阻止代码运行。为什么媒体查询不起作用？任何帮助赞赏。谢谢。

答

这可能是由于没有设置视口：https://www.w3schools.com/css/css_rwd_viewport.asp至少我没有在代码中看到任何视口。

另外;我总是学会了每个screentype具有不同的样式表;维护起来更容易，移动用户不必再花费不必要的IPad css。

要做到这一点，我把我的媒体查询放在head标签和一个视口之间。每个媒体查询链接到单独的.css文件

下面是使用两种样式的HTML文件的示例。我相信你可以通过使用'和'来扩展媒体查询，这将允许你使用特定的样式表来筛选最小和最大之间的屏幕尺寸。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>demo</title> 
     <link rel="stylesheet" href="reset.css" type="text/css"> <!-- My CSS reset --> 
     <link rel="stylesheet" href="style.css" type="text/css"> <!-- My main style, also for PC... --> 
     <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile_style.css" /> <!-- Mediaquery that detects mobile screens and serves them the other stylesheet--> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!-- viewport --> 
    </head> 
    <body> 
     <p>Responsive text goes here.</p> 
    </body> 
</html>

css媒体查询不是针对iPhone的

相关推荐