CSS网格部分响应

Question

我正在尝试使用以下html代码在16列网格中构建简单的navbar和footer。

*{
        	margin: 0;
        	padding: 0;
        }
        
        .grid{
        	display: grid;
        	grid-template-columns: repeat(14, 1fr);
        	grid-column-gap: 10px;
        }
        
        .title{
        	grid-column: 1/15;
        	background-color: #269acb;
        	display:grid;
        	grid-template-columns: repeat(2, 1fr);
        }
        .nav{
        	display:grid;
        	grid-template-columns: repeat(6, 1fr);
        }
        
        .logo{
        	padding:20px 40px 20px 20px;
        }
        
        .menu{
        	padding:30px 5px 20px 5px;
        	font-size: 12px;
        	color: #ffffff;
        	text-decoration: none;
        }
        
        .social{
        	display:grid;
        	grid-template-columns:repeat(5, 1fr);
        	justify-self: end;
        	
        }
        
        .schedule{
        	background-color: #269acb;
        	border-radius: 5px;
        	border: 1px solid #ffffff;
        	margin:13px 10px 13px;
        	color: #ffffff;
        	vertical-align: middle;
        	
        }
        
        .icon{
        	padding:30px 5px 20px 5px;
        }
        
        
        .footer{
        	grid-column: 1/15;
        	background-color: #155570;
        	display: grid;
        	grid-template-columns: repeat(14, 1fr);
        	grid-template-row: repeat(3, 1fr);
        	grid-column-gap: 10px;
        	
        }
        
        footer .a{
        	text-decoration: none;
        	color:#ffffff;
        	
        }
        
        
        .footerlogo{
        	grid-row:1/2;
        	grid-column: 2/3;
        	
        }
        
        .footerlink{
        	text-decoration: none;
        	color:#ffffff;
        }
        .footer-col1{
        		grid-row:1/2;
        		grid-column: 4/6;
        }
        
        .footer-col2{
        		grid-row:1/2;
        		grid-column: 6/8;
        }
        .footer-col3{
        		grid-row:1/2;
        		grid-column: 8/10;
        }
        .footer-col4{
        		grid-row:1/2;
        		grid-column: 10/12;
        		justify-self: end;
        }
        
        .subscribe{
        	grid-row:2/3;
        	grid-column:10/14;
        	justify-self: center;
        }
        
        .copyright{
        	grid-row:3/4;
        	grid-column:2/5;
        	font-size: 10px;
        }

    	<!-- start of  container grid -->
    		<div class="grid">
    			<!-- start of  header -->
    		
    			<div class="title">
    				<div class="nav">
    					<img src="Home Page-assets/logo.png" alt="logo"class="logo">
    					<a href="" class="menu">ABOUT US</a>
    					<a href="" class="menu">STUDENT</a>
    					<a href="" class="menu">PROPERTY OWNER</a>
    					<a href="" class="menu">PEER AND LEARN</a>
    					<a href="" class="menu">CONTACT</a>
    				</div>
    				
    				<div class="social">
    					<button class="schedule">SCHEDULE VISIT</button>
    					<a href="#"><img src="Home Page-assets/insta.png" alt="insta icon" class="icon"></a>
    					<a href="#"><img src="Home Page-assets/twit.png" alt="twitter icon" class="icon"</a>
    					<a href="#"><img src="Home Page-assets/fb.png"alt="FB icon"  class="icon"></a>
    					<a href="#"><img src="Home Page-assets/down.png" alt="dummy icon" class="icon"></a>
    				</div>
    			
    			</div>
    			
    			<!-- end of  header -->
    			<!-- start of  footer -->
    			
    			<div class="footer">
    				<img src="Home Page-assets/logo.png" alt="logo"  class="footerlogo">
    				<div class="footer-col1"><a href="" class="">About Us><br><a href="" class="">student</a><br><a href="" class="">property owner</a><br><a href="" class="">refer and earn</a></div>
    				<div class="footer-col2"><a href="" class="">Career></a><br><a href="" class="">blog</a><br><a href="" class="">gallery</a><br><a href="" class="">media</a></div>
    				<div class="footer-col3"><a href="" class="">Contact us><br><a href="" class="">Terms &#38 Conditions</a><br><a href="" class="">Privacy Policies</a><br><a href="" class="">FAQ's</a></div>
    				<div class="footer-col4">
    					<p>Follow Us</p><br>
    					<a href="#"><img src="Home Page-assets/insta.png" alt="insta icon" class="icon"></a>
    					<a href="#"><img src="Home Page-assets/twit.png" alt="twitter icon" class="icon"</a>
    					<a href="#"><img src="Home Page-assets/fb.png"alt="FB icon"  class="icon"></a>
    				
    				</div>
    				<div class="subscribe">
    					<input type="text" class="inputform" placeholder="[email protected]"/>
    					<button>subscribe</button>
    				</div>
    				<div class="copyright">Copyright&#x24B8 2019| All rights reserved by InstaDwell</div>
    			</div>
    			<!-- end of  footer -->
    			
    		</div>


   

     

但是，我的代码对iPhone 5之类的较小设备没有响应，而对于iPad则仅是微不足道的。可能是什么错误？我正在使用16 column grid。在桌面模式下，当我缩小浏览器宽度时，它看起来很好，内容会响应直到一个宽度，然后在700px左右完全隐藏。

Answer 1

您需要根据屏幕宽度更改网格设置。您可以通过CSS文件底部的媒体查询来做到这一点：

@media only screen and (min-width: 700px) {
    .grid {
        // properties
    }

    .footer {
        // properties
    }
    // ...
}

这是在屏幕尺寸大于或等于700像素时更改CSS。请注意，如果屏幕尺寸小于700px，浏览器将CSS应用于@media查询之外，如果屏幕尺寸大于700px，则将CSS应用于媒体查询内部。

这样，您基本上可以创建完全不同的样式，这些样式会根据屏幕尺寸而改变，并且在您的情况下，您可以更改较小屏幕的网格布局，以使内容实际适合您的屏幕。