Question

我正在制作一个非常简单的网站倒计时网站，其中包含一个图像和两行文字（包括倒计时）。我想让它对设备宽度负责。当有人在手机或平板电脑上看到这个网站时，我希望字体更小。我用过媒体查询。当我想在我的PC浏览器中测试它时（通过调整浏览器窗口的大小）它无法正常工作。谁能告诉我什么可能是错的？

HTML：

 <head>
 <meta name="viewport" content="width=width, initial-scale=1.0;">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <title>Countdown</title>
 <link rel="stylesheet" type="text/css" media="all" href="css/main.css" />
 <script type='text/javascript'src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

 <script type="text/javascript">
     // countdown script
 </script>
 </head>

 <body>
 <div id="content">

     <div id="zasuvka"></div>     //here is my image
     <p id="ele">TITLE</p>       // here is the title

     <div id="odpocet" >
     <div id="prichadza">Remains: </div> <div id="countdown"></div>   //here is shown the countdown
     </div>

     <div id="show" style="display:none">     // div that will show after the countdown
     <a href="#" target="_blank">LINK</a>
     </div>

 </div>
 </body>

CSS：

 @media screen and (max-width: 480px) {

  #prichadza {
 font-size:24px;
 float:left;
 text-align:center;
 font-family:"sans";
 color:#ffffff;
 padding-top:10px;
 }

 #countdown{
 padding-left:10px;
 font-size:24px;
 font-family:"sans";
 color:#a54d14;
 }
 }

 body{
 background: -webkit-linear-gradient(#e4cf8e, #fdf7e5); /* For Safari */
 background: -o-linear-gradient(#e4cf8e, #fdf7e5); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(#e4cf8e, #fdf7e5); /* For Firefox 3.6 to 15 */
 background: linear-gradient(#e4cf8e, #fdf7e5); /* Standard syntax (must be last) */
 }

 @font-face
 {
 font-family: sans;
 src: url(../fonts/OpenSans-Bold.ttf);
 }


 #content{
 width:100%;
 text-align:center;
 }

 #zasuvka {
 width:318px;
 height:303px;
 background:url('../img/zasuvka.png')no-repeat;
 margin:auto;
 margin-top:120px;
 }

 #countdown{
 padding-left:10px;
 font-size:44px;
 float:left;
 font-family:"sans";
 color:#a54d14;
 }

 #ele {
 font-family:"sans";
 font-size: 48px;
 color:#a54d14;
 margin:0px;
 padding-top:30px;
 }

 #prichadza {
 font-size:34px;
 float:left;
 text-align:center;
 font-family:"sans";
 color:#a54d14;
 padding-top:10px;
 }

 #odpocet {
 width:600px;
 padding-left:95px;
 margin:auto;
 }

 #show a {
 font-size:44px;
 text-align:center;
 font-family:"sans";
 color:#a54d14;
 }

有什么建议吗？谢谢。

Answer 1

在css文档的末尾移动“@media screen and（max-width：480px）”！所以它看起来像：

 body{
 background: -webkit-linear-gradient(#e4cf8e, #fdf7e5); /* For Safari */
 background: -o-linear-gradient(#e4cf8e, #fdf7e5); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(#e4cf8e, #fdf7e5); /* For Firefox 3.6 to 15 */
 background: linear-gradient(#e4cf8e, #fdf7e5); /* Standard syntax (must be last) */
 }

 @font-face
 {
 font-family: sans;
 src: url(../fonts/OpenSans-Bold.ttf);
 }


 #content{
 width:100%;
 text-align:center;
 }

 #zasuvka {
 width:318px;
 height:303px;
 background:url('../img/zasuvka.png')no-repeat;
 margin:auto;
 margin-top:120px;
 }

 #countdown{
 padding-left:10px;
 font-size:44px;
 float:left;
 font-family:"sans";
 color:#a54d14;
 }

 #ele {
 font-family:"sans";
 font-size: 48px;
 color:#a54d14;
 margin:0px;
 padding-top:30px;
 }

 #prichadza {
 font-size:34px;
 float:left;
 text-align:center;
 font-family:"sans";
 color:#a54d14;
 padding-top:10px;
 }

 #odpocet {
 width:600px;
 padding-left:95px;
 margin:auto;
 }

 #show a {
 font-size:44px;
 text-align:center;
 font-family:"sans";
 color:#a54d14;
 }

 @media screen and (max-width: 480px) {
      #prichadza {
     font-size:24px;
     float:left;
     text-align:center;
     font-family:"sans";
     color:#green;
     padding-top:10px;
     }

     #countdown{
     padding-left:10px;
     font-size:24px;
     font-family:"sans";
     color:#a54d14;
     }
 }

Answer 2

我看到你的css中有一个媒体查询，屏幕小于或等于480px ...在其中你定义了#prichadza和#countdown ....但是你再次定义这两个 - 这次是媒体查询的“外部”，具有相同属性的不同值。它不会那样 - 你需要在媒体查询中的规则中添加!important，或者你需要指定另一个媒体查询screen and (min-width:481px)并在这里定义大于480的屏幕规则而不是规则你放在“外面”。
对于第一个解决方案，你只需要这样的东西。：

 @media screen and (max-width: 480px) {
    #prichadza {
         font-size:24px !important;
    }
  }

...而你的#prichadza字体大小现在会改变。

调整大小时在浏览器中测试时响应式设计不起作用

2 个答案: