我正在制作一个非常简单的网站倒计时网站，只有一张图片和两行文字(包括倒计时)。我想让它对设备宽度负责。当有人在手机或平板电脑上看到这个网站时，我希望字体更小。我用过媒体查询。当我想在我的 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;
}
有什么建议吗？谢谢。
最佳答案
将“@media screen and (max-width: 480px)”移到css文件末尾! 所以它看起来像:
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;
}
}
关于html - 调整大小时在浏览器中测试时响应式设计不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21652168/