媒体查询不起作用，而页面无响应

时间：2018-05-03 06:28:59

标签： html css

实际上，我是HTML和CSS的新手。对于练习，我使用的是psd＆amp;试图实施，但我的媒体查询不起作用。我已经尝试将所有容器的宽度设置为100％但是当我在浏览器中执行响应模式时，右侧会出现一个空白区域。再次，当我试图减小屏幕尺寸时，它正在破碎。有人请指导我这个。这将是非常有帮助的。 

html,body,ul,li,p{
    margin:0px;
    padding:0px;
}





.content{
    width: 1250px;
    margin: 0px auto;
}


.body-container{
    width:100%;
    margin:0px auto;
    background:url(https://i.imgur.com/4hBal14.png);
    background-size: cover;
}


#logo {
    height: 100px;
    vertical-align: middle;
    margin-right:250px;
  }



.nav-container ul{
    list-style-type: none;
    background:transparent;
}

.nav-container li{
    float: left;
    color:white;
    font-family: 'Gentium Book Basic', serif;
}

.nav-container ul li:not(:first-child):hover {
    text-align:center;
  }

.nav-container >ul >li:not(:first-child) {
    padding-top:54px;
    margin-right:53px;
  }

.social-media{
    margin-left:-18px;
}

.social-media li{
    margin-right:18px;
}

.fa {
    text-decoration: none;
}


.fa-facebook {

    color:#dab33e;
  }
  
  .fa-twitter {
    color:#dab33e;
  }
  
  .fa-youtube {
    color:#dab33e;
  }
  

.nav-container p{
    clear:both;
    font-family: 'Yeseva One', cursive;
    text-align:center;
    font-size:48px;
    color:white;
    padding-top:130px;
    margin-bottom:30px;
}

.border{
    text-align:center;
}

.border img{
    width:230px;
    height:50px;
    margin-bottom:42px;
}

.button-group{
    text-align: center;
    padding-bottom:142px;
}

.nav-container .button-1 {
    margin-left: 30px;
    width:229px;
    display: inline-block;
	padding: 10px 14px;
	color: #FFF;
	border: 1px solid #010101;
	text-decoration: none;
	font-size: 14px;
	line-height: 120%;
    background: #201913; /* fallback color for old browsers */
    background: rgba(32, 25, 19, 0.5);
	-webkit-transition: background-color 300ms ease;
	-moz-transition: background-color 300ms ease;
	transition: background-color 300ms ease;
	cursor: pointer;
}


.nav-container .button-2 {
    margin-left: 30px;
    width:229px;
    display: inline-block;
	padding: 10px 14px;
	color: #fff;
	border: 1px solid #FFF;
	text-decoration: none;
	font-size: 14px;
	line-height: 120%;
    background: #fff; /* fallback color for old browsers */background: rgba(255, 255, 255, 0.5);
   
	-webkit-transition: background-color 300ms ease;
	-moz-transition: background-color 300ms ease;
	transition: background-color 300ms ease;
	cursor: pointer;
}


.chef-container{
    width:100%;
    margin:0px auto;
    float:left;
    background:url(https://i.imgur.com/ZekPxCX.png) 0 0 repeat;
}


.chef-words{
   
    margin-top:100px;
    width:50%;
    float:left;
}



.chef-words p{
    font-family:'Yeseva One', cursive;
    text-align:center;
    font-size: 42px;
    color:#cc9900;
}



.border-2{
    text-align:center;
}

.chef-words .chef-words-2{
    font-family: 'Lato', sans-serif;
    font-size:14px;
    color: #000000;
    text-align:center;
    margin-top:42px;
}

.chef{
    text-align:center;
    margin-top:58px;
}


.chef-container .chef-plate{
    width: 50%;
    float:right;
    margin-top:76px;
    margin-bottom:82px;
}

.ingredient-container{
    clear:both;
    width:100%;
    margin:0px auto;
    background:url(https://i.imgur.com/jrvxhTU.png);
    background-size: cover;
    padding-top:100px;
    padding-bottom:100px;
   
}

.overlay{
    width:570px;
    background-color: #221c17;
     opacity:0.7;
    padding:50px;
    margin-left:600px;
   
}

.overlay h2{
    font-family:'Yeseva One', cursive;
    color:white;
    text-align: center;
}

.overlay p{
    font-family: 'Lato', sans-serif;
    font-size:14px;
    text-align:center;
    color:white;
}

 .ingredient-images{
    text-align: center;
}

.ingredient-images img{
    margin-right:30px;
    margin-top:72px;
}

.border-5{
    text-align:center;
}

.menu{
    clear:both;
    float:left;
    width:100%;
    background:url(https://i.imgur.com/LUnK8M7.png) 0 0 repeat;
}

.appetizer{
    float:left;
}

.appetizer h1{
    margin-left:227px;
    font-size:35px;
    font-family:'Yeseva One', cursive;
    color:#cc9900;
}

.appetizer .border-4 img{
    margin-left:210px;
    width:230px;
    height:28px;
    margin-bottom:40px;
}

.appetizer p{
    font-family: 'Lato', sans-serif;
}

.appetizer h4{
    font-family:'Yeseva One', cursive;
    font-size:20px;
    margin:0px;
    color:#c89f2d;
    border-bottom:1px solid;
    border-image: linear-gradient(to right, #e6e2ca 0%,#e0d5ad 60%, #e3d7ae 61%, #e6e2ca 100%);
	border-image-slice: 1;
}

.menu-1{
    float:left;
    margin-left:110px;
    margin-bottom:41px;

}

.menu-1 h4{
    padding-bottom:13px;
}

.menu-1 p{
    padding-top:14px;
}

.menu-1  .items{
    margin-right:293px;
}

.menu-2{
    clear:both;
    float:left;
    margin-left:110px;
    margin-bottom:41px;
}

.menu-2 .items{
    margin-right:206px;
}

.menu-2 h4{
    padding-bottom:13px;
}

.menu-2 p{
    padding-top:14px;
}

.menu-3{
    clear:both;
    float:left;
    margin-left:110px;
    margin-bottom:71px;
}

.menu-3 .items{
    margin-right:206px;
}

.menu-3 h4{
    padding-bottom:13px;
}

.menu-3 p{
    padding-top:14px;
}

.appetizer .salads{
    margin-left:266px;
}

.menu-4{
    clear:both;
    float:left;
    margin-left:110px;
    margin-bottom:30px;
}

.menu-4 .items{
    margin-right:222px;
}

.menu-4 h4{
    padding-bottom:13px;
}

.menu-4 p{
    padding-top:14px;
}

.special{
    position:relative;
    clear:both;
    float:left;
    margin-left:95px;
    border:1px solid #e3d4a3;
    margin-bottom:28px;
}

.special .special-price{
    position:absolute;
    top:-20px;
    right:-1px;
    background-image: url(./special.png);
    color:white;
    padding-left: 13px;
    padding-right: 13px;
    text-align:center;
    border:none;
}

.special .menu-5 .items{
    margin-right:250px;
}

.special .menu-5 h4{
    border-bottom: 1px solid;
    margin-left: 10px;
    margin-right: 14px;
    padding-bottom:13px;
}

.special .menu-5 p{
    margin-left:10px;
    padding-top:13px;
}

.menu-6{
    clear:both;
    float:left;
    margin-left:110px;
    margin-bottom:100px;
}

.menu-6 .items{
    margin-right:245px;
}

.menu-6 h4{
    padding-bottom:13px;
}

.menu-6 p{
    padding-top:14px;
}





.starters{
    float:left;
}


.starters h1{
    margin-left:310px;
    font-size:35px;
    font-family:'Yeseva One', cursive;
    color:#cc9900;
}

.starters .border-4 img{
    margin-left:261px;
    width:230px;
    height:28px;
    margin-bottom:40px;
}

.starters .main{
    margin-left:270px;
}

.starters .border-10 img{
    margin-left:261px;
    width:230px;
    height:28px;
    margin-bottom:40px;
}


.starters p{
    font-family: 'Lato', sans-serif;
}

.starters h4{
    font-family:'Yeseva One', cursive;
    font-size:20px;
    margin:0px;
    border-bottom:1px solid;
    color: #c89f2d;
    border-image: linear-gradient(to right, #e6e2ca 0%,#e0d5ad 60%, #e3d7ae 61%, #e6e2ca 100%);
	border-image-slice: 1;
}

.menu-7{
    float:left;
    margin-left:170px;
    margin-bottom:40px;
}

.menu-7 .items{
    margin-right:287px;
}

.menu-7 h4{
    padding-bottom:13px;
}

.menu-7 p{
    padding-top:14px;
}

.menu-8{
    clear:both;
    float:left;
    margin-left:170px;
    margin-bottom:73px;
}

.menu-8 .items{
    margin-right:252px;
}

.menu-8 h4{
    padding-bottom:13px;
}

.menu-8 p{
    padding-top:14px;
}

.menu-9{
    clear:both;
    float:left;
    margin-left:170px;
    margin-bottom:30px;
}

.menu-9 .items{
    margin-right:186px;
}

.menu-9 h4{
    padding-bottom:13px;
}

.menu-9 p{
    padding-top:14px;
}

.special-price{
    position:relative;
    margin-left:154px;
    clear:both;
    float:left;
    border:1px solid #e3d4a3;;
    margin-bottom:30px;
}

.special-price h4{
    margin-left: 14px;
    margin-right: 10px;
    padding-bottom:13px;
}

.special-price .special-item{
    border:1px solid;
    position:absolute;
    top:-20px;
    right:0px;
    background-image: url(./special.png);
    color: white;
    padding-left: 13px;
    padding-right: 13px;
    text-align: center;
    border: none;
}

.special-price .menu-10 .items{
    
    margin-right:252px;
}

.special-price .menu-10 p{
    margin-left:15px;
    padding-top:13px;

}





.menu-11{
    margin-left:170px;
    clear:both;
    float:left;
    margin-bottom:44px;
}

.menu-11 .items{
    margin-right:235px;
}

.menu-11 h4{
    padding-bottom:13px;
}

.menu-11 p{
    padding-top:14px;
}

.menu-12{
    margin-left:170px;
    clear:both;
    float:left;
}

.menu-12 .items{
    margin-right:286px;
}

.menu-12 h4{
    padding-bottom:13px;
}

.menu-12 p{
    padding-top:14px;
}




.review{
    clear:both;
    width:100%;
    margin:0px auto;
    background:url(https://i.imgur.com/d1vYNzu.png);
    background-size: cover;
    padding-top:100px;
    padding-bottom:100px;
}

.guest-reviews{
    margin-left:240px;
    text-align:center;
    width:770px;
    background-color: #010101;
    color:white;
    opacity:0.7;
    padding:50px;
}

.guest-reviews h2{
    font-family:'Yeseva One', cursive;
}


.content >.guest-reviews> p {
   font-family:'Gentium Book Basic', bold;
   font-size:19px;
   color:white;
}

.guest-reviews .food{
    margin-top:45px;
}
.contact{
    width:100%;
    float:left;
    margin:0px auto;
    background:url(https://i.imgur.com/3mZ8Axw.png) 0 0 repeat;
    padding-top:100px;
    padding-bottom:100px;
}

.food-items{
    float:left;
    width:50%;
}

.food-items .food-item-1{
   margin-right:30px;
}



.just-container{
    float:left;
    width:50%;
}

.just-container h1{
    text-align: center;
    font-family: 'Yeseva One', cursive;
    color:#cc9900;
    margin-top:-10px;
}

.just-container p{
    margin-left: 115px;
    font-family: 'Lato', sans-serif;
    color:#000000;
}


.above-form-text{
    margin-top:28px;
    margin-bottom:46px;
    margin-left: 115px;
}

form{
    margin-left:100px;
}

label {
    display:block;
    font-size:19px;
}

input{
    display:block;
    width:200px;
    height:34px;
}

input:focus { 
    outline: none !important;
    border:1px solid #c89f2d;
}

select{
    display: block;
    width:200px;
    height:37px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background:url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #FFF;
    background-position-x: 178px;
    background-size: 9px;
}

.submit-button {
    background-color:#c9a131;
    border: none;
    color: white;
    width:200px;
    padding: 13px 61px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
}


.footer-container{
    clear:both;
    float:left;
    margin:0px auto;
    width:100%;
    margin:0px auto;
    background:black;
}

.column {
    clear:right;
    background: black;
    text-align:center;
    float: left;
    width: 33.33%;
    padding-bottom:40px;
}

.column h2 {
    color:white;
}


.column p {
    color:white;
}



.cards{
    margin-top:53px;
}

.social{
    margin-top:53px;
}






/* Large devices (laptops/desktops, 992px and up) */


@media (max-width: 992px)  {
  

    .nav-container{
        width:80%
    }
    
    .chef-words{
    
        width:80%;
    }

    .chef-plate{
        width:100%;
        margin-right:500px;
        
    }


    .ingredient-container{
        width:100%;
    }
   
    .overlay{
        width:20%;
        margin:0px auto;
    }

    .menu{
        width:100%;
    }

    .menu-1{
        width:100%;
    }


    .menu-2{
        width:100%;
    }

    .menu-3{
        width:100%;
    }

    .menu-4{
        width:100%;
    }

    .menu-5{
        width:100%;
    }

    .menu-6{
        width:100%;
    }
  
    .menu-7{
        width:100%;
    }

    .menu-8{
        width:100%;
    }

    .menu-9{
        width:100%;
    }

    .menu-10{
        width:100%;
    }

    .menu-11{
        width:100%;
    }

    .menu-12{
        width:100%;
        
    }
    .appetizer{
        width:40%;
    }

    .review{
        width:100%;
    }

    .guest-reviews{
        width:40%;
    }

    .contact{
        width:100%;
    }

    .food-item-1{
        width:50%;
    }

    .food-item-2{
        width:50%;
    }

    .just-container{
        width:80%;
    }

    .footer-container{
        width:100%;
    }

    .column{
        width:100%;
    }
  }
  
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Yeseva+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gentium+Book+Basic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<title>Home</title>
</head>

<body>



  <div class="body-container">
    <div class="content">
            <div class="nav-container">
        <ul>
        <li><a href="#"><img id="logo" src="https://i.imgur.com/jpWGTQO.png" alt="Skype Logo" width="158px" height="110px"></a></li>   
        <li>Home</li>
        <li>About</li>
        <li>Ingredients</li>
        <li>Menu</li>
        <li>Revews</li>
        <li>Reservations</li>
        <li>
                <ul class="social-media">
    
                  <li>
                    <a href="#" class="fa fa-twitter"></a>
                  </li>
                  <li>
                    <a href="#" class="fa fa-youtube"></a>
                  </li>
                  <li>
                    <a href="#" class="fa fa-facebook"></a>
                  </li>
                </ul>
        </li>
        </ul>

        
        

        
        <p>the right ingredients <br>for the right food</p>
        <div class="border"><img src="https://i.imgur.com/Gc18m31.png"></div>
        
        <div class="button-group">
        <button class="button-1">Book a table</button>
        <button class="button-2">See the Menu</button>
        </div>
</div>
        </div>
    </div>
        
        
        
        
        <div class="chef-container">
        
        <div class="content">
                <div class="chef-words">
                        <p>just the right food</p>
                        <div class="border-2"><img src="https://i.imgur.com/1PYWBDw.png"></div>
                        <p class="chef-words-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
                        Etiam a ligula libero. Proin varius sollicitudin consequat. <br>
                        Etiam eleifend felis augue, sit amet porttitor odio eleifend non.<br>
                        Nullam consectetur efficitur odio in ultrices.</p>
                        <div class="chef"><img src="https://i.imgur.com/V33QPy3.png"></div>
                        </div>
                        
                        <div class="chef-plate">
                        <img src="https://i.imgur.com/NCilq7W.png" width="584px" height="546px">
                        </div>
        </div>
        
        
        
        
        </div>
        
        <div class="ingredient-container">
        <div class="content">
                <div class="overlay">
                        <h2>Fine Ingredients</h2>
                        <div class="border-5"><img src="border-5.png"></div>
                        <p>If you’ve been to one of our restaurants, you’ve seen – and tasted</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
                        Etiam a ligula libero. Proin varius sollicitudin consequat. <br>
                        Etiam eleifend felis augue, sit amet porttitor odio eleifend non.<br>
                        Nullam consectetur efficitur odio in ultrices.</p>
                        <div class="ingredient-images">
                        <img src="pulses.png" width="100px" height="108px">
                        <img src="rice.png" width="100px" height="108px"> 
                        <img src="bread.png" width="100px" height="108px">          
                        </div>
                        </div>
        </div>
       
        </div>
        
        <div class="menu">
            <div class="content">

                    <div class="appetizer">
                            <h1>Appetizers</h1>
                            <div class="border-4"><img src="border-4.png"></div>

                   <div class="menu-1">
                           <h4><span class="items">Taztsiki</span><span class="price">$3.99</span></h4>
                           <p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
                   </div>

                   <div class="menu-2">
                        <h4><span class="items">Aubergine Salad</span><span>$3.99</span></h4>
                        <p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
                </div>

                <div class="menu-3">
                        <h4><span class="items">Aubergine Salad</span><span>$3.99</span></h4>
                        <p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
                </div>



                   <h1 class="salads">Salads</h1>
                   <div class="border-4"><img src="border-4.png"></div>

                   <div class="menu-4">
                        <h4><span class="items">Ollive Specials</span><span>$3.99</span></h4>
                        <p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
                </div>
            <div class="special">
                <p class="special-price">Special</p>
                <div class="menu-5">
                        <h4><span class="items">Greek Salad</span><span class="price">$3.99</span></h4>
                        <p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
                </div>
            </div>
               

                <div class="menu-6">
                        <h4><span class="items">Gusto Salad</span><span>$3.99</span></h4>
                        <p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
                </div>
                            
                   </div>


                   <div class="starters">
                                <h1>Starters</h1>
                                <div class="border-4"><img src="border-4.png"></div>

                <div class="menu-7">
                                        <h4><span class="items">Haloumi</span><span>$3.99</span></h4>
                                        <p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
                </div>
             
                <div class="menu-8">
                                     <h4><span class="items">Spinach Pie</span><span>$3.99</span></h4>
                                     <p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
                </div>

                <h1 class="main">Main Dishes</h1>
                <div class="border-10"><img src="border-4.png"></div>

                <div class="menu-9">
                     <h4><span class="items">Cornish Mackerel</span><span>$3.99</span></h4>
                     <p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
             </div>
         <div class="special-price">
                 <p class="special-item">Special</p>
             <div class="menu-10">
                     <h4><span class="items">Roast Lamb</span><span class="price">$3.99</span></h4>
                     <p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
             </div>
         </div>

         <div class="menu-11">
                <h4><span class="items">Fried Chicken</span><span>$3.99</span></h4>
                <p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
        </div>

        <div class="menu-12">
                <h4><span class="items">Pastitsio</span><span>$3.99</span></h4>
                <p>Refreshing traditonal cucumber and garlic yoghurt dip</p>
        </div>
                           
                                
                   </div>
                            
                           
            </div>
        
       
        
        </div>
        
        <div class="review">
            <div class="content">
                    <div class="guest-reviews">
                            <h2>Guest Reviews</h2>
                            <div class="border-5"><img src="border-5.png"></div>
                            <p>	<span><img src="inverted.png"</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
                            Aenean consectetur ex fermentum tortor varius elementum. Donec gravida libero nec auctor blandit. <br>
                            Fusce pretium porttitor ante, quis egestas justo aliquet vitae.<br>
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <p class="food">-food inc, New York</p>
                            </div>
            </div>
       
        </div>
        
        <div class="contact">
            <div class="content">
                    <div class="food-items">
                            <img class="food-item-1" src="food-item-1.png" width="270px" height="508px">
                            <img src="food-item-2.png"  width="270px" height="508px">
                            </div>  

                            <div class="just-container">
                            <h1>just the right food</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
                                Sed pharetra, magna a porttitor dapibus, nisi augue luctu<br>
                                 Nunc viverra, elit sit amet sagittis lobortis, leo orci</p>
                                 <p class="above-form-text">            </p>
                                
                                     <div class="form">
                            
                            <form>
                            <section>
                            
                            <div style="float:left;margin-right:20px;">
                            <label for="name">Name</label>
                            <input id="name" type="text" value="" name="name" placeholder="your name *">
                            </div>
                            
                            <div style="float:left;">
                            <label for="email">Email</label>
                            <input id="email" type="text" value="" name="email" placeholder="your email *" >
                            </div>
                            
                            <br style="clear:both;" />
                            
                            </section>
                            
                            <section>
                            
                            <div style="float:left;margin-right:20px; margin-top:50px;">
                            <label for="name">Date</label>
                            <input id="date" type="date" value="" name="date" placeholder="date *">
                            </div>
                            
                            <div style="float:left;margin-top:50px;">
                            <label for="email">Party Number</label>
                            <select id="party" >
                            </select>
                            </div>
                            <button class="submit-button" style="clear:both;float:left;margin-left:142px; margin-top:33px;">Book Now!</button>
                            </section>
                            </form>
                            
                            </div>
                            </div>
            </div>
       
        </div>
        
      
        </div>
        </body>

</html>

2 个答案:

答案 0 :(得分：2)

在不同的视图端口上，根据您的要求更改.content div的宽度， 我可以给你一些断点，比如

注意： - 这只是您想法的一个示例。根据您的实际需要和设计使用

@media (max-width: 992px)  {
   .content {width: 960px;}
}
@media (max-width: 768px)  {
   .content {width: 740px;}
}
@media (max-width: 481px)  {
   .content {width: 100%;}
}

答案 1 :(得分：0)

我已经查明了问题所在的代码。它是

.content{
    width: 1250px;
    margin: 0px auto;
}

这里指定了容器的固定宽度，因此当您缩小屏幕宽度时，它仍然具有相同的宽度。 您可以使用max-width或对其进行媒体查询。

水平滚动的另一个原因是.menu- *类的margin-left。由于窗口宽度较小，因此将内容推到画布外部，从而导致滚动。

希望这有帮助。

- 帮助：）

相关问题
最新问题