我尝试在这个网站上搜索问题而我找不到任何结论......所以这里...... [/ p>
我对自适应网页设计的@media查询似乎无效。当我调整视口大小时，它仍然只有我的样式表上的样式。我不得不错过一些东西，而且无法弄清楚原因，这变得非常令人沮丧。我脑子里有正确的元标记，我很确定我的@media查询代码中没有任何语法错误，我仍然无法弄明白。任何帮助，将不胜感激。这是我的代码......我的媒体查询位于我的CSS底部。也许这就是我的问题....嗯。 Anywho。
HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="style.css">
<link type="text/css" rel="stylesheet" href="slick/slick.css">
</head>
<body>
<main id="mainContent" role="main">
<article role="article">
<section>
<header>
<div class="container">
<div class="single-item-rtl" dir="rtl">
<div><img src="img/4.jpeg"></div>
<div><img src="img/3.jpeg"></div>
<div><img src="img/1.jpeg"></div>
<div><img src="img/2.jpeg"></div>
</div>
<div id="logo"><img src="img/SJ_WHT.png" height="170px" width="220x" align="center" /></div>
<div id="text-top-carousel">
<h1>a better way to book creative spaces</h1>
</div>
</div>
</header>
</section>
<section class="container-fluid additional">
<div class="row">
<div class="col-md-4">
<div class="info">
<div class="icon icon1"></div>
<h2>unique spaces <br> that inspire</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore etdolore magna aliqua</p>
</div>
</div>
<div class="col-md-4">
<div class="info">
<div class="icon icon2"></div>
<h2>hassle free <br> booking</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
<div class="col-md-4">
<div class="info">
<div class="icon icon3"></div>
<h2>share your <br>creative space</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
</div>
<div class="motto">
<h1>unleash your creativity</h1>
<p>We focus on your artistic expression at Studio Junkey. We believe that your creative process is limited when the necessary resources are not available to execute your vision. <br></nr> We want to ensure that you find the studio space that has the tools you need to express yourself and your vision</p>
</div>
</section>
<section id="contactForm" class="container-fluid">
<div class="row">
<div class="form col-md-6">
<h3>Want to list a <br>studio space?</h3>
<p>We are looking for more studios. <br>
Send us your information<br> so we can connect.</p>
<form>
<input type="text" name="fullname" placeholder="Full Name">
<select>
<option selected="selected">Type of Studio</option>
<option value="photography">Photography</option>
<option value="audio">Recording/Music/Audio</option>
<option value="painting">Drawing/Painting</option>
<option value="pottery">Pottery</option>
<option value="other">Other</option>
</select>
<input type="text" name="studioname" placeholder="Studio Name">
<div class="shortForms">
<input type="text" name="phone" placeholder="Phone">
<input type="text" name="email" placeholder="Email"><br>
<input type="submit" value= "Submit">
</div>
</form>
</div>
<div class="form col-md-6">
<h3>Need to rent a studio space?</h3>
<p>We are working very hard to bring our vision to life. Studio Junkey will be ready soon...</p>
<hr class="style-six" />
<p>Enter your email address and we will notify you when we are ready to launch.</p>
<div class="shortForms">
<input type="text" name="email" placeholder="Email"><br>
<input type="submit" value="Submit">
</div>
</div>
</div>
</section>
<footer role="footer">
<h3>Questions? Feel free to<a href="#">contact us</a>.</h3>
<div class="subFooter">
<p class="copyright">©2015 Studio Junkey</p>
<p class="termsPrivacy"><a href="#">Terms</a><a href="#">Privacy</a></p>
</div>
</footer>
</article>
</main>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.single-item-rtl').slick({
rtl: true,
autoplay: true,
autoplaySpeed: 3000,
arrows: false,
});
});
</script>
</body>
</html>
CSS：
@font-face {
font-family: "Brandon Grotesque";
src: url("fonts/Brandon_Grotesque/Brandon_reg.otf") format("opentype");
}
html, body {
padding:0;
margin: 0;
}
body {
font-family:"Brandon Grotesque";
}
#mainContent {
background: white;
}
.container {
width: 100%;
height:600px;
text-align:center;
margin:auto;
padding:0;
}
.container-fluid {
padding: inherit;
}
.row {
margin: 0;
}
.single-item-rtl img {
width: 100%;
height: auto;
max-height: 600px;
}
#logo {
position:relative;
top:-595px;
left:0em;
}
#text-top-carousel h1 {
position:relative;
top:-575px;
left:0em;
color:white;
font-size:55px;
padding: 10px;
}
#info {
width:100%;
height:auto;
margin: 0px;
}
.info {
height:auto;
padding:20px 0;
background:white;
text-align: center;
color:#333333;
}
.info .icon {
width:150px;
height:135px;
padding:10px;
margin: 0 auto;
background-position:15px 0px;
background-size: 150px 150px;
background-repeat: no-repeat;
}
.info .icon1 {
background-image:url("./img/icon%201.png);
}
.info .icon2 {
background-image:url("./img/book122.png");
}
.info .icon3 {
background-image:url("./img/icon%203.png");
}
.info h2 {
padding:30px 48px 10px 48px;
font-size: 45px;
margin-bottom: 0px;
margin-top: 0px;
line-height: 1em;
}
.info p {
padding:15px 50px 45px 50px;
margin: 0px;
font-size: 20px;
}
.motto {
background-image:url("img/6.jpg");
text-align: center;
color: white;
clear: both;
width:100%;
margin:0 auto;
margin-bottom:0px;
height: 600px;
}
.motto h1 {
font-size: 60px;
padding-top: 90px;
margin-bottom: 20px;
}
.motto p {
font-size: 30px;
padding: 15px 100px 90px 100px;
}
#contactForm {
background: #EDEFED;
margin-top:0px;
width: 100%;
margin: 0 auto;
overflow: auto;
}
.form {
text-align: center;
margin: 0 auto;
color:#333333;
}
.form h3 {
margin: 0;
font-size: 40px;
line-height: 1em;
padding: 90px 185px 5px 185px;
}
.form p {
font-size: 24px;
padding:20px 150px;
margin:0;
}
input[type="text"] {
display: block;
margin: 0 auto;
margin-bottom: 10px;
width: 350px;
height:30px;
font-size: 14px;
appearance: none;
box-shadow: none;
border-radius: none;
}
input[type="submit"] {
-webkit-appearance: none;
display: block;
background: #EDEFED;
margin: 0 auto;
margin-bottom: 10px;
width: 350px;
height:30px;
font-size: 14px;
appearance: none;
box-shadow: none;
border-radius: none;
}
select {
-webkit-appearance: menulist-button;
display: block;
margin: 0 auto;
margin-bottom: 10px;
width: 355px;
height:30px;
font-size: 14px;
appearance: none;
box-shadow: none;
border-radius: none;
}
.shortForms input {
display: inline-block;
margin: 0 auto;
margin-bottom: 10px;
width: 175px;
height:30px;
font-size: 14px;
appearance: none;
box-shadow: none;
border-radius: none;
}
input[type="text"]:focus {
outline: none;
}
.style-six {
border: 0;
margin-top: 10px;
margin-bottom: 10px;
width:150px;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.subFooter {
padding: 0 100px;
}
.copyright {
float: left;
}
.termsPrivacy {
float: right;
}
footer a {
display:inline-block;
margin-left: 5px;
color:#333333;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
color: #333333;
}
.additional {
padding-left: 0;
padding-right: 0;
}
@media screen and (min-width:758px) and (max-width:990px){
.container{
width:100%;
}
.info p{
padding:15px 300px 45px 300px;
margin: 0px;
font-size: 20px;
color: red;
}
}
我甚至试图在媒体查询中做出明显的更改，例如将文本颜色设置为红色，并且当我更改视口大小时，它不会更改。有什么建议或帮助吗？在此先感谢!!
答案 0 :(得分：2)
.info .icon2 {
background-image:url(./img/book122.png");
}
这打破你的代码应该是
.info .icon2 {
background-image:url("./img/book122.png");
}
答案 1 :(得分：0)
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
@media all and (max-width: 990px) {
.container{
width:100%;
}
.info p{
padding:15px 300px 45px 300px;
margin: 0px;
font-size: 20px;
color: red;
}
}
媒体查询应该遵循所有其他css规则。
答案 2 :(得分：0)
我最近遇到了这个问题，发现视口初始比例的语法是错误的。使用"initial-scale=1.0"破坏了我所有的媒体查询。将"1.0"更改为"1"可以解决所有问题。