提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
提示：如果你还不能轻松写意的做一个前端响应式网站，这篇文章对你非常有帮助：
例如：一套代码多端使用，降低企业投入成本已经是刚需，对于前端程序员来说学会如何编写响应式代码尤为重要，接下来给大家讲解一个现成的响应式官网模板。
提示：以下是本篇文章正文内容，下面案例可供参考
一、什么是响应式布局？
响应式设计（RWD，Responsive Web Design）是页面布局可以「响应」不同尺寸屏幕的设计方法。通常我们说起响应式设计都是针对网页设计的。同一个页面，随着屏幕尺寸的改变，自适应地改变页面布局。
二、实际网站讲解
1.引入CSS库
代码如下（示例）：
<link rel="stylesheet" href="css/linearicons.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/magnific-popup.css" />
<link rel="stylesheet" href="css/nice-select.css" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/main.css" />2.引入Js库
代码如下（示例）：
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/easing.min.js"></script>
<script src="js/hoverIntent.js"></script>
<script src="js/superfish.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/mail-script.js"></script>
<script src="js/main.js"></script>大部分js库做动画效果用，如果没有要求，可以删除掉。
3.HTML代码
<body>
<header id="header" id="home">
<div class="header-top">
<div class="container">
<div class="row justify-content-end">
<div class="col-lg-8 col-sm-4 col-8 header-top-right no-padding">
<ul>
<li>Mon-Fri: 8am to 2pm</li>
<li>Sat-Sun: 11am to 4pm</li>
<li>
<a href="tel:(012) 6985 236 7512">(012) 6985 236 7512</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row align-items-center justify-content-between d-flex">
<div id="logo">
<a href="index.html"><img src="img/logo.png" alt="" title="" /></a>
</div>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#coffee">Coffee</a></li>
<li><a href="#review">Review</a></li>
<li><a href="#blog">Blog</a></li>
<li class="menu-has-children">
<a href="">Pages</a>
<ul>
<li><a href="generic.html">Generic</a></li>
<li><a href="elements.html">Elements</a></li>
</ul>
</li>
</ul>
</nav>
<!-- #nav-menu-container -->
</div>
</div>
</header>
<!-- #header -->
<!-- start banner Area -->
<section class="banner-area" id="home">
<div class="container">
<div
class="row fullscreen d-flex align-items-center justify-content-start"
>
<div class="banner-content col-lg-7">
<h6 class="text-white text-uppercase">
Now you can feel the Energy
</h6>
<h1>
Start your day with <br />
a black Coffee
</h1>
<a href="#" class="primary-btn text-uppercase">Buy Now</a>
</div>
</div>
</div>
</section>
<!-- End banner Area -->
<!-- Start video-sec Area -->
<section class="video-sec-area pb-100 pt-40" id="about">
<div class="container">
<div class="row justify-content-start align-items-center">
<div
class="col-lg-6 video-right justify-content-center align-items-center d-flex"
>
<div class="overlay overlay-bg"></div>
<a class="play-btn" href=""
><img class="img-fluid" src="img/play-icon.png" alt=""
/></a>
</div>
<div class="col-lg-6 video-left">
<h6>Live Coffee making process.</h6>
<h1>
We Telecast our <br />
Coffee Making Live
</h1>
<p><span>We are here to listen from you deliver exellence</span></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod temp or incididunt ut labore et dolore magna aliqua. Ut
enim ad minim.
</p>
<img class="img-fluid" src="img/signature.png" alt="" />
</div>
</div>
</div>
</section>
<!-- End video-sec Area -->
<!-- Start menu Area -->
<section class="menu-area section-gap" id="coffee">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="menu-content pb-60 col-lg-10">
<div class="title text-center">
<h1 class="mb-10">What kind of Coffee we serve for you</h1>
<p>Who are in extremely love with eco friendly system.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="single-menu">
<div class="title-div justify-content-between d-flex">
<h4>Cappuccino</h4>
<p class="price float-right">$49</p>
</div>
<p>
Usage of the Internet is becoming more common due to rapid
advance.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="single-menu">
<div class="title-div justify-content-between d-flex">
<h4>Americano</h4>
<p class="price float-right">$49</p>
</div>
<p>
Usage of the Internet is becoming more common due to rapid
advance.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="single-menu">
<div class="title-div justify-content-between d-flex">
<h4>Espresso</h4>
<p class="price float-right">$49</p>
</div>
<p>
Usage of the Internet is becoming more common due to rapid
advance.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="single-menu">
<div class="title-div justify-content-between d-flex">
<h4>Macchiato</h4>
<p class="price float-right">$49</p>
</div>
<p>
Usage of the Internet is becoming more common due to rapid
advance.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="single-menu">
<div class="title-div justify-content-between d-flex">
<h4>Mocha</h4>
<p class="price float-right">$49</p>
</div>
<p>
Usage of the Internet is becoming more common due to rapid
advance.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="single-menu">
<div class="title-div justify-content-between d-flex">
<h4>Coffee Latte</h4>
<p class="price float-right">$49</p>
</div>
<p>
Usage of the Internet is becoming more common due to rapid
advance.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="single-menu">
<div class="title-div justify-content-between d-flex">
<h4>Piccolo Latte</h4>
<p class="price float-right">$49</p>
</div>
<p>
Usage of the Internet is becoming more common due to rapid
advance.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="single-menu">
<div class="title-div justify-content-between d-flex">
<h4>Ristretto</h4>
<p class="price float-right">$49</p>
</div>
<p>
Usage of the Internet is becoming more common due to rapid
advance.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="single-menu">
<div class="title-div justify-content-between d-flex">
<h4>Affogato</h4>
<p class="price float-right">$49</p>
</div>
<p>
Usage of the Internet is becoming more common due to rapid
advance.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- End menu Area -->
<!-- Start gallery Area -->
<section class="gallery-area section-gap" id="gallery">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="menu-content pb-60 col-lg-10">
<div class="title text-center">
<h1 class="mb-10">What kind of Coffee we serve for you</h1>
<p>Who are in extremely love with eco friendly system.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<a href="img/g1.jpg" class="img-pop-home">
<img class="img-fluid" src="img/g1.jpg" alt="" />
</a>
<a href="img/g2.jpg" class="img-pop-home">
<img class="img-fluid" src="img/g2.jpg" alt="" />
</a>
</div>
<div class="col-lg-8">
<a href="img/g3.jpg" class="img-pop-home">
<img class="img-fluid" src="img/g3.jpg" alt="" />
</a>
<div class="row">
<div class="col-lg-6">
<a href="img/g4.jpg" class="img-pop-home">
<img class="img-fluid" src="img/g4.jpg" alt="" />
</a>
</div>
<div class="col-lg-6">
<a href="img/g5.jpg" class="img-pop-home">
<img class="img-fluid" src="img/g5.jpg" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End gallery Area -->
<!-- Start review Area -->
<section class="review-area section-gap" id="review">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="menu-content pb-60 col-lg-10">
<div class="title text-center">
<h1 class="mb-10">What kind of Coffee we serve for you</h1>
<p>Who are in extremely love with eco friendly system.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 single-review">
<img src="img/r1.png" alt="" />
<div class="title d-flex flex-row">
<h4>lorem ipusm</h4>
<div class="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
</div>
<p>
Accessories Here you can find the best computer accessory for your
laptop, monitor, printer, scanner, speaker. Here you can find the
best computer accessory for your laptop, monitor, printer,
scanner, speaker.
</p>
</div>
<div class="col-lg-6 col-md-6 single-review">
<img src="img/r2.png" alt="" />
<div class="title d-flex flex-row">
<h4>lorem ipusm</h4>
<div class="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
</div>
<p>
Accessories Here you can find the best computer accessory for your
laptop, monitor, printer, scanner, speaker. Here you can find the
best computer accessory for your laptop, monitor, printer,
scanner, speaker.
</p>
</div>
</div>
<div class="row counter-row">
<div class="col-lg-3 col-md-6 single-counter">
<h1 class="counter">2536</h1>
<p>Happy Client</p>
</div>
<div class="col-lg-3 col-md-6 single-counter">
<h1 class="counter">7562</h1>
<p>Total Projects</p>
</div>
<div class="col-lg-3 col-md-6 single-counter">
<h1 class="counter">2013</h1>
<p>Cups Coffee</p>
</div>
<div class="col-lg-3 col-md-6 single-counter">
<h1 class="counter">10536</h1>
<p>Total Submitted</p>
</div>
</div>
</div>
</section>
<!-- End review Area -->
<!-- Start blog Area -->
<section class="blog-area section-gap" id="blog">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="menu-content pb-60 col-lg-10">
<div class="title text-center">
<h1 class="mb-10">What kind of Coffee we serve for you</h1>
<p>Who are in extremely love with eco friendly system.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 single-blog">
<img class="img-fluid" src="img/b1.jpg" alt="" />
<ul class="post-tags">
<li><a href="#">Travel</a></li>
<li><a href="#">Life Style</a></li>
</ul>
<a href="#"><h4>Portable latest Fashion for young women</h4></a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
<p class="post-date">31st January, 2018</p>
</div>
<div class="col-lg-6 col-md-6 single-blog">
<img class="img-fluid" src="img/b2.jpg" alt="" />
<ul class="post-tags">
<li><a href="#">Travel</a></li>
<li><a href="#">Life Style</a></li>
</ul>
<a href="#"><h4>Portable latest Fashion for young women</h4></a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
<p class="post-date">31st January, 2018</p>
</div>
</div>
</div>
</section>
<!-- End blog Area -->
<!-- start footer Area -->
<footer class="footer-area section-gap">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6>About Us</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore dolore magna aliqua.
</p>
<p class="footer-text">
Copyright © 2018.Company name All rights reserved.
</p>
</div>
</div>
<div class="col-lg-5 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6>Newsletter</h6>
<p>Stay update with our latest</p>
<div class="" id="mc_embed_signup">
<form
target="_blank"
novalidate
action=""
method="get"
class="form-inline"
>
<input
class="form-control"
name="EMAIL"
placeholder="Enter Email"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Enter Email '"
required=""
type="email"
/>
<button class="click-btn btn btn-default">
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</button>
<div style="position: absolute; left: -5000px">
<input
name="b_36c4fd991d266f23781ded980_aefe40901a"
tabindex="-1"
value=""
type="text"
/>
</div>
<div class="info pt-20"></div>
</form>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 social-widget">
<div class="single-footer-widget">
<h6>Follow Us</h6>
<p>Let us be social</p>
<div class="footer-social d-flex align-items-center">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-behance"></i></a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- End footer Area -->
</body>4.媒介查询部分代码
@media (max-width: 991.98px) {
.footer-social {
text-align: left;
}
}
@media (max-width: 991.98px) {
.single-footer-widget {
margin-bottom: 30px;
}
}
@media (max-width: 800px) {
.social-widget {
margin-top: 30px;
}
}
@media (max-width: 767.98px) {
.generic-banner .height {
height: 400px;
}
}
.generic-banner .generic-banner-content h2 {
line-height: 1.2em;
margin-bottom: 20px;
}
@media (max-width: 991.98px) {
.generic-banner .generic-banner-content h2 br {
display: none;
}
}
.generic-banner .generic-banner-content p {
text-align: center;
font-size: 16px;
}
@media (max-width: 991.98px) {
.generic-banner .generic-banner-content p br {
display: none;
}
}5.网站效果图
免费送演示模板
如果有需要模板的同学，私聊作者就行
4325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
