html - 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="yourmail@domain.com"/>
    					<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 列网格。在桌面模式下，它看起来很好，因为我缩小了浏览器的宽度，内容的行为响应达到一个宽度，然后它们在大约 700px 后完全隐藏。

Answer 1

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

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

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

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

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