如何使此代码具有响应性？

Question

 .intro-section { height: 100%; padding-top: 150px; text-align: center; background: #449bb5; background-attachment: fixed !important; } .ham-layer { height: 50px; width: 50px; background: #fff; margin: 0px; top: 0; left: 0; position: fixed; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; opacity: 0; } #nav-icon { position: fixed; left: 35px; top: 0px; width: 32px; height: 20px; margin: 50px auto; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; z-index: 1001; } #nav-icon span { display: block; position: absolute; height: 5px; width: 100%; background: #fff; border-radius: 2px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #nav-icon span:nth-child(1) { top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #nav-icon span:nth-child(2) { top: 9px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #nav-icon span:nth-child(3) { top: 18px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #nav-icon.open span { background: #111111; } #nav-icon.open span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: -1px; left: 1px; } #nav-icon.open span:nth-child(2) { width: 0%; opacity: 0; } #nav-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 22px; left: 2px; } .ham-layer.open { overflow: hidden; -webkit-transform: scale(100); -ms-transform: scale(100); transform: scale(100); opacity: 1; -webkit-transition: .8s all ease; transition: .8s all ease; z-index: 1000; } 

 <section id="intro" class="intro-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="ham-layer"></div> <!-- <i class="fa fa-bars hamburger"></i> --> <div id="nav-icon"> <span></span> <span></span> <span></span> </div> <p id="_intro" class="text-center">Darth Vader</p> <hr width=40%> <p id="belowIntro" class="text-center">Interactive Portfolio</p> </div> </div> </div> </section> 

这是我在html中的代码段。 问题在于该部分没有响应。 具体地说，当屏幕变小时，它会水平滚动并显示空白。 这是什么原因呢？ 如何使此部分响应？

Answer 1

您可以通过在CSS中使用媒体查询来使页面响应。

这是一个可以帮助您入门的教程：

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

---

Bootstrap中的媒体查询模板：

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }