響應式設計在調整大小時在瀏覽器中測試時不起作用

我正在製作一個非常簡單的帶有一個圖像和兩行文本（包括倒計時）的網站倒計時網站。我想讓它對設備寬度負責。當有人在手機或平板電腦上看到此網站時，我希望字體更小。我已經使用媒體查詢。當我想在我的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; 
}

有什麼建議？謝謝。

來源

2014-02-08 user2886091

您已經使用媒體查詢與ID prichadza格，但它是不是在你的HTML。如果您使用js填充它，請將字體大小和其他樣式屬性標記爲重要。 – Nix

我的錯，複製代碼時我犯了一個錯誤。我在我的HTML中有這個div。我編輯了我的帖子。 – user2886091

在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; 
    } 
}

來源

2014-02-08 22:00:12

我看到在你的CSS你有一個媒體查詢屏幕少於或等於480px ...在它裏面你定義#prichadza和#countdown ....但是然後你再次定義這兩個 - 這次「外部「的媒體查詢具有不同的值到相同的屬性。它不會這樣工作 - 您需要在媒體查詢中的規則中添加!important，或者您需要指定另一個媒體查詢screen and (min-width:481px)並在此處定義大於480的屏幕規則，而不是您放置在「外部」的規則。
的第一個解決方案，你只需要像這樣.:

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

...和你#prichadza字體大小，現在會做改變。

來源

2014-02-08 21:56:50

響應式設計在調整大小時在瀏覽器中測試時不起作用

回答

相關問題