关于@media (min-width: )响应问题，已经快36小时没睡了，跪求高手解决

最新推荐文章于 2024-03-18 13:37:34 发布

原创最新推荐文章于 2024-03-18 13:37:34 发布 · 380 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

博主在经过36小时不眠不休的尝试后，仍无法解决CSS中的@media (min-width:)响应问题。尽管网页前端已基本完成，但这一难点导致进度停滞。

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">
    <title>麻烦高手接招了</title>
<style>
/* 全局设置 */
*{margin:0px;padding:0px;font-family:微软雅黑,Simsun,Verdana,Arial,Helvetica,sans-serif;}
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,div,p,img{border:0;margin:0;padding:0;color:#5c5b5c;}
body{font-size:12px;background:url(../images/bg.png) repeat;}
input,select,label{vertical-align:middle;color:#5c5b5c;display:inline-block;}
a{text-decoration:none;color:#5c5b5c;cursor:pointer;}
a:hover{color:#f26522;text-decoration:underline;}
img{border:none;max-width:100%;width:100%;-ms-interpolation-mode:bicubic;}
ul li{list-style:none;}
li{list-style:none;}
.clear{clear:both;}
.fl{float:left;}
.fr{float:right;}
/* 全局设置 */

*{box-sizing: border-box;}
.center{width:1280px;margin:0 auto;}
#content{width:1280px;margin:0 auto;}
.projectd{width:100%;border:1px solid #dbdbdb;background:#f9fbe9;}
.projectd h2{line-height:40px;font-size:16px;font-weight:normal;text-align:center;}
.box_listd{width:100%;overflow:hidden;}
.box_listd li{width:15%;min-width:110.4;max-weight:241px;padding:5px;margin:10px;border:1px solid #dbdbdb;float:left;background:#fff;}
.box_listd li:last-child{margin-right:0;}
.box_listd li img{width:94%;margin:3%;}
.box_listd li h3{line-height:20px;font-size:14px;font-weight:normal;margin-bottom:10px;overflow:hidden;white-space:nowrap;text-align:center;}
.box_listd li:hover{display:block;transform:scale(1.03);transition:all 0.5s;box-shadow:4px 4px 4px #ccc;}

@media (min-width:480px) and (max-width:767px) {{}}
@media (min-width:768px) and (max-width:978px) {{}}
@media (min-width:979px) and (max-width:1200px) {{}}


</style>
</head>
<body>
    <div id="content">
        <div class="projectd">
            <h2><a href="#">标题</a></h2>
            <ul class="box_listd">
                <li><a href="#"><img src="images/1.jpg" /><h3>策划</h3></a></li>
                <li><a href="#"><img src="images/2.jpg" /><h3>策划</h3></a></li>
				<li><a href="#"><img src="images/3.jpg" /><h3>策划</h3></a></li>
				<li><a href="#"><img src="images/4.jpg" /><h3>策划</h3></a></li>
				<li><a href="#"><img src="images/5.jpg" /><h3>策划</h3></a></li>
				<li><a href="#"><img src="images/6.jpg" /><h3>策划</h3></a></li>
            </ul>
	<div class="clear"></div>
        </div>
	</div>	
<body>
</html>

研究了整个星期了，还是搞不定，整个网页前端都搞出来了，就这个@media问题搞了两天，快撑不住了！