1. 首页
  2. 问答
  3. 响应在电话

响应在电话

2016-04-21 39 views
1

不工作我创建了一个网站，我做出响应下摆与@media，所有的事情都是正确的，当我与Mozilla的减肥，我没有任何问题响应在电话

，但是当我看到我的网站用我的手机所有的东西都丢了，我看到了灾难：'（

我让Mozilla的大小{ 1280px，980px，800像素，768px，为360px，320px的 }

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

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

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

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

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

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

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

 
.foot, .hicham, .hand, .basket{ 
 
\t -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 { 
 
\t background: transparent url("icon/facebook.png") no-repeat center top; 
 
} 
 

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

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

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

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

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

 

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

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

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

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

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

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

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

 
.foot, .hicham, .hand, .basket{ 
 
\t -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 { 
 
\t background: transparent url("icon/facebook.png") no-repeat center top; 
 
} 
 

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

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

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

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

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

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

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

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

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

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

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

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

 
.foot, .hicham, .hand, .basket{ 
 
\t -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 { 
 
\t background: transparent url("icon/facebook.png") no-repeat center top; 
 
} 
 

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

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

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

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

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

 

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

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

 
.gauche { 
 
\t visibility: hidden; \t 
 
\t } 
 

 

 

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

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

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

 
.basket{ 
 
\t visibility: hidden; 
 
} 
 

 

 

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

 
.copyright { 
 
\t font-family: monospace; 
 
\t color: #FFF; 
 
\t text-transform: inherit; 
 
\t display: block; 
 
\t text-align: center; 
 
\t margin-top: 20px; 
 
\t font-weight: bold; 
 
\t 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; 
 
\t -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
\t overflow-x:hidden; 
 
} 
 

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

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

 

 
.gauche { 
 
\t visibility: hidden; \t 
 
\t } 
 

 

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

 
\t 
 

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

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

 
.basket{ 
 
\t visibility: hidden; 
 
} 
 

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

任何帮助？

来源

2016-04-21 sayou

+1

这将是非常有帮助如果你张贴你的CSS媒体查询 – boernard

+0

@boernard我让它 – sayou

回答

1

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

经过长时间的解释，这是你需要添加到你的html代码<head>：<meta name="viewport" content="width=device-width, initial-scale=1">，这应该会让你的手机（和所有其他手机）告诉你的网站手机的宽度真的是什么。所有的@media查询都应该可以工作。

希望有帮助！

这里的一些文章值得一试的详细资料：

  1. CSS技巧：https://css-tricks.com/snippets/html/responsive-meta-tag/
  2. MDN：https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
  3. ENVATO TUTS +：http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

来源

2016-04-21 01:39:20

+0

首先它只是用于手机或者像平板电脑等所有东西的工作？ 我使元代码，这是工作，但我有一些问题，例如我让事情显示没有大小的手机，但当我看到我的手机，我看到这个东西？我如何解决它？ – sayou

+0

@sayou它将适用于所有设备。 'display：none;'问题可能是您的手机很大以触发媒体查询。尝试让媒体查询变大一点，例如，如果您认为手机为320像素，请尝试使HTML元素在500像素处消失，以测试媒体查询是否真的有效。如果您的HTML元素消失，那么您知道您的媒体查询正在运行，并且其定位的屏幕尺寸小于您的手机。如果HTML元素仍然没有消失，那么你知道你的媒体查询不起作用，或者它没有选择你真正想要的元素。 –

相关问题

 相关问题