响应在 phone 中不起作用

Question

我创建了一个网站，我用@media 做了下摆响应，一切正常，当我用 Mozilla 瘦身时我没有任何问题

但是当我看到我的网站和我的 phone 所有东西都丢失时，我看到了一场灾难:'(

我将 Mozilla 大小设为 { 1280 像素、980 像素、800 像素、768 像素、360 像素、320 像素 }

@media only screen and (max-width : 992px) {
body {
 background:url(img/Saad.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.logo {
 background: transparent url("img/logo.png") no-repeat scroll center top;
 width: 212px;
 height: 89px;
 position: absolute;
 top: 85px;
 margin-left: 702px;
}

.gauche {
 margin-top : -253px;
 float: left;
 width: 250px;
 height: 75px;
 position: absolute;
 margin-left: 15px; 
 }

.rs li {
 float: left;
 width: 47px;
 height: 47px;
 margin:0px 4px 0px 0px;
}

.players {
    width: 700px;
    margin: 321px auto;
    display: block;
    position: relative;
    height: 90px;
}

.hicham{
 display: block;
 margin: -563px 140px 79px 130px;
 position: absolute;
}
.hand{
 display: block;
 margin: -495px 0px 94px 357px;
}

.basket{
 margin: -906px 0px 98px 260px;
}

.foot, .hicham, .hand, .basket{
 -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.foot:hover, .hicham:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

.hand:hover, .basket:hover{
  -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
       -o-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(10deg);
}

a li{
list-style: none;
}

.fb {
 background: transparent url("icon/facebook.png") no-repeat center top;
}

.twitter {
 background: transparent url("icon/twitter.png") no-repeat scroll center top;
 }

.instagram {
 background: transparent url("icon/icon4.png") no-repeat scroll center top;
}

.youtube {
 background: transparent url("icon/youtube.png") no-repeat scroll center top;
}

.sponsors {
 display: block;
 width: auto;
 height: 65px;
 background: #FFF url("img/pubb.png") no-repeat scroll center top;
 margin-top: 320px;
}

.copyright {
 font-family: monospace;
 color: #FFF;
 text-transform: inherit;
 display: block;
 text-align: center;
 margin-top: 30px;
 font-weight: bold;
 font-size: 12px;
}
}


/* Medium Devices, Desktops */
@media only screen and (max-width : 800px) {
body {
 background:url(img/Saad.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.logo {
 background: transparent url("img/logo.png") no-repeat scroll center top;
 width: 212px;
 height: 89px;
 position: absolute;
 top: 85px;
 margin-left: 555px;
}

.gauche {
 margin-top : -253px;
 float: left;
 width: 250px;
 height: 75px;
 position: absolute;
 margin-left: 15px; 
 }

.rs li {
 float: left;
 width: 47px;
 height: 47px;
 margin:0px 4px 0px 0px;
}

.players{
 width: 700px;
 margin: 354px auto;
 display: block;
 position: relative;
 height: 90px;
}

.hicham{
 display: block;
 margin: -563px 140px 79px 130px;
 position: absolute;
}
.hand{
 display: block;
 margin: -495px 0px 94px 357px;
}

.basket{
 margin: -906px 0px 98px 260px;
}

.foot, .hicham, .hand, .basket{
 -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.foot:hover, .hicham:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

.hand:hover, .basket:hover{
  -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
       -o-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(10deg);
}

a li{
list-style: none;
}

.fb {
 background: transparent url("icon/facebook.png") no-repeat center top;
}

.twitter {
 background: transparent url("icon/twitter.png") no-repeat scroll center top;
 }

.instagram {
 background: transparent url("icon/icon4.png") no-repeat scroll center top;
}

.youtube {
 background: transparent url("icon/youtube.png") no-repeat scroll center top;
}

.sponsors {
 display: block;
 width: auto;
 height: 65px;
 background: #FFF url("img/pubb.png") no-repeat scroll center top;
 margin-top: 320px;
}

.copyright {
 font-family: monospace;
 color: #FFF;
 text-transform: inherit;
 display: block;
 text-align: center;
 margin-top: 30px;
 font-weight: bold;
 font-size: 12px;
}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
 body {
 background:url(img/Saad.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.logo {
 background: transparent url("img/logo.png") no-repeat scroll center top;
 width: 212px;
 height: 89px;
 position: absolute;
 top: 85px;
 margin-left: 526px;
}

.gauche {
 margin-top : -237px;
 float: left;
 width: 250px;
 height: 75px;
 position: absolute;
 margin-left: 15px; 
 }

.rs li {
 float: left;
 width: 47px;
 height: 47px;
 margin:0px 4px 0px 0px;
}

.players{
 width: 700px;
 margin: 353px auto;
 display: block;
 position: relative;
 height: 90px;
}

.hicham{
 display: block;
 margin: -563px 140px 79px 130px;
 position: absolute;
}
.hand{
 display: block;
 margin: -495px 0px 94px 357px;
}

.basket{
 margin: -906px 0px 98px 260px;
}

.foot, .hicham, .hand, .basket{
 -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.foot:hover, .hicham:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

.hand:hover, .basket:hover{
  -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
       -o-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(10deg);
}

a li{
list-style: none;
}

.fb {
 background: transparent url("icon/facebook.png") no-repeat center top;
}

.twitter {
 background: transparent url("icon/twitter.png") no-repeat scroll center top;
 }

.instagram {
 background: transparent url("icon/icon4.png") no-repeat scroll center top;
}

.youtube {
 background: transparent url("icon/youtube.png") no-repeat scroll center top;
}

.sponsors {
 display: block;
 width: auto;
 height: 65px;
 background: #FFF url("img/pubb.png") no-repeat scroll center top;
 margin-top: 320px;
}

.copyright {
 font-family: monospace;
 color: #FFF;
 text-transform: inherit;
 display: block;
 text-align: center;
 margin-top: 30px;
 font-weight: bold;
 font-size: 12px;
}
}


/* Custom, iPhone Retina */ 
@media only screen and (max-width : 360px) {
 body {
 background:url(img/Saad.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.logo {
 background: transparent url("img/logo.png") no-repeat scroll center top;
 width: 212px;
 height: 89px;
 position: absolute;
 top: 22px;
 margin-left: 70px;
}

.gauche {
 visibility: hidden; 
 }



.players{
 margin: 100px 0px 0px -374px;
}

.foot{
 margin: -1px 0px 0px 417px;
}

.hicham{
 display: block;
 position: absolute;
 visibility: hidden;
}
.hand{
 display: block;
 visibility: hidden;
}

.basket{
 visibility: hidden;
}



.sponsors {
 display: block;
 width: auto;
 height: 65px;
 background: #FFF url("img/pubb1.png") no-repeat scroll center top;
 margin-top: 320px;
}

.copyright {
 font-family: monospace;
 color: #FFF;
 text-transform: inherit;
 display: block;
 text-align: center;
 margin-top: 20px;
 font-weight: bold;
 font-size: 12px;
}
}


/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 320px) {

body{
background:url(img/Saad.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 overflow-x:hidden;
}

.players {
    margin: 131px 0px 0px -405px;
}

.logo {
 margin: -9px 0px 0px 49px;
}


.gauche {
 visibility: hidden; 
 }


.sponsors {
    display: block;
    width: auto;
    height: 25px;
    background: #FFF url("img/pubb1.png") no-repeat scroll center top;
    margin-top: 148px;
}

 

.foot{
 margin: -28px 0px 0px 461px;
 width: 200px;
}

.hicham{
 display: block;
 position: absolute;
 visibility: hidden;
}
.hand{
 display: block;
 visibility: hidden;
}

.basket{
 visibility: hidden;
}

.copyright {
 font-family: monospace;
color: #FFF;
text-transform: inherit;
display: block;
text-align: center;
margin-top: 6px;
font-weight: bold;
font-size: 12px;
}
}

有什么帮助吗？

Answer 1

移动浏览器试图使您的网站看起来不错，因此它们不会像您期望的那样逐个像素地呈现您的网站。例如：假设您的 phone 宽度为 250px，但您的 phone 可能会告诉您的网站它是 500px 甚至 1000px 宽度，这反过来使您的@media 查询过时。

经过这么长的解释，这就是您需要添加到 html 代码的 <head> 中的内容：<meta name="viewport" content="width=device-width, initial-scale=1">，这应该使您的 phone（和所有其他 phones) 告诉您的网站 phone 的真正宽度是多少。你所有的@media 查询都应该有效。

希望对您有所帮助！

以下是一些值得查看以获取更多信息的文章：

响应在 phone 中不起作用

Responsive doesn't work in phone

css

media-queries