深入解析响应式布局
Posted 夜枭
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深入解析响应式布局相关的知识，希望对你有一定的参考价值。
首先响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。最开始是从2012年12月底我国网民规模达到5.64亿，互联网普及率为42.1%，手机用户占网民总数的74.5%。预计到2015年，移动互联网的数据流量将超越PC端的流量。
当用户希望通过手机来完成PC页的操作时，常见的是商家的运营微博，期文案足够吸引用户点击链接参加活动，如果该活动页没做响应式处理：页面体积大、请求多、体验差、兼容性差，层层阻碍最终导致用户放弃参加。响应式的优点是,Web APP：html5+JS+CSS – 门槛低，极易上手，迭代快。
要想实现响应式可用以下三种方式:第一种是<meta name="viewport" content="width=device-width, initial-scale=1.0"> ，视口的 meta 标签，重写了默认的视口，并帮助加载与特定视口相关的样式。width 属性设置屏幕宽度。它包含一个值，比如 640，表示 640 像素，或者值为 ‘device-width‘，用来告诉浏览器使用原始的分辨率。initial-scale 属性是视口最初的比例。当设置为 1.0 时，将呈现设备的原始宽度。
例如<!DOCTYPE html>
<head>
<style>
.b{background:url("images/desk.jpg")no-repeat;background-size:100%;height:698px;}
</style>
<meta name="viewport"content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="css/bootstrap.css">
<link rel="stylesheet"href="css/bootstrap-theme.css">
</head>
<body>
<div class="container"> <!--容器-->
<div class="row b"> <!--设置背景图-->
<div class="row"style="margin-top:30px;margin-bottom:90px;">
<div class="col-md-4 col-md-offset-4"><img src="images/hugo.png"class="img-responsive"></div> <!--设置背景图-->
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="col-md-3">
<button class="btn btn-lg btn-primary">Dosc<span class="glyphicon glyphicon-apple"></span></button>
</div>
<div class="col-md-3">
<button class="btn btn-lg btn-success">Install<span class="glyphicon glyphicon-download"></span></button>
</div>
<div class="col-md-4">
<button class="btn btn-lg btn-info">Community<span class="glyphicon glyphicon-folder-open"></span></button>
</div>
<div class="col-md-2">
<button class="btn btn-lg "style="background:black;color:white;opacity:0.7;">GitHub<span class="glyphicon glyphicon-star"></span></button>
</div>
</div>
</div>
</div>
<!--e-->
<div class="row"style="height:508px;background:#fffcf4;">
<div class="row"style="margin-top:50px;margin-left:260px;">
<div class="col-md-6 col-md-offset-3">
<img src="images/未标题-1.png"class="responsive">
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h2>Make the Web Fun Again</h2>
<p style="font-size:22px; ">
Introducing Hugo,a new idea around making
website creation simple simple again.Hugo flexibly works
with mang formats and is ideal for blogs,dcs,
Portfolios and much more.Hugo‘s speed fosters
creativity and makes building awebsite fun again.
</p>
</div>
</div>
</div>
<!--run-->
<div class="row"style="background:#60d2d3;height:566px;">
<div class="row"style="margin-top:70px;margin-bottom:50px;">
<div class="col-md-6 col-md-offset-3 text-center">
<img src="images/未标题-2.png">
<img src="images/未标题-3.png">
<img src="images/未标题-4.png">
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center"style="margin-bottom:20px;">
<h2 style="color:white;margin-botton:20px;">Run Anywhere</h2>
<p style="font-size:23px; color:white;">
Hugo is quite possibly the possibly the casicst to instal
software you‘ve ever used,simply download and
run.Hugo doesn‘L depend on administrative
Privileges,databases,runLimes,inLerpreters or
external libraries.SitesBuilt with Hugo can be
deployed on S3,GitHub Pages,Dropbox or any web
host
</p>
</div>
</div>
</div>
<!--fast-->
<div class="row"style="height:481px;background:#fffcf4;">
<div class="row"style="margin-top:50px;margin-bottom:30px;margin-left:500px;">
<img src="images/未标题-5.png"class="responsive">
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center"style="margin-bottom:20px;">
<h2>Fast&Powerful</h2>
<p style="font-size:23px;width:100%;">
Hug is Written for speed and performance.Great
care has been taken to ensure that Hugo build time
is as short as possible.We‘re talking milliseconds
to build your entire site for most setups.
</p>
</div>
</div>
</div>
<!--Flexible-->
<div class="row"style="background:#60d2d3;height:567px;">
<div class="row"style="margin-top:50px;margin-bottom:50px;margin-left:500px;">
<img src="images/未标题-6.png"class="img-responsive">
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h2 style="color:white;margin-bottom:30px;">Flexible</h2>
<p style="font-size:22px;color:white;">
Hugo is designed to work how you do. Organize
your content however you want with any URL
structure.Declare your own content types.Define
your own meta data in YAMI,TOML,or JSON.Use
indexes to group your content however you want.
Best of all this is all done with virtually no
configuration,Hugo just works.
</p>
</div>
</div>
</div>
<!--Flexible-->
<div class="row"style="background:#769cac;height:700px;">
<div class="row"style="margin-top:50px;margin-left:500px;margin-bottom:100px;">
<img src="images/未标题-7.png"class="img-responsive">
</div>
<div class="row"style="text-center;width:90%;margin-left:50px;">
<div class="col-md-4">
<p style="font-size:22px;color:white;">
One mor satified
#Hugo blogger.Thanks
@spf13 and friends!
-Michael Whatcott(@indwhatou)
<a href="#">may23,2014</a>
</p>
</div>
<div class="col-md-4">
<p style="font-size:22px;color:white;">
The dev version of Hugo
is AWESOME!<3I
promise,Iwill try to
learn go ASAP and help
contribute to the
project! Just too great!
<a href="#">may23,2014</a>
</p>
</div>
<div class="col-md-4">
<p style="font-size:22px;color:white;">
The dev version of Hugo
is AWESOME!<3I
promise,Iwill try to
learn go ASAP and help
contribute to the
project! Just too great!
<a href="#">may23,2014</a>
</p>
</div>
<div class="row text-center"style="margin-top:300px;font-size:16px;color:white;">prove<br/> nest</div>
</div>
</div>
<!--Open-->
<div class="row"style="background:#fffcf4;height:392px;">
<div class="row"style="margin-top:50px;margin-left:500px;margin-bottom:30px;">
<img src="images/未标题-8.png"class="img-responsive">
</div>
<div class="row">
<div class="col-md-6 col-md-offset-5">
<h2>Open and Free</h2>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-4">
<p style="font-size:20px;margin-right:50px;">
Hugo is<a href="#">open source</a>and completely free.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
另一个方法是用媒体对象来实现，第一个区域以 ‘@media (max-width: 480px)‘ 开始，为最大宽度为 480 像素的设备设置样式。第二个区域以 ‘@media (max-width: 767px)‘ 开始，为最大宽度为 767像素的设备设置样式。第三个区域以 ‘@media (min-width: 768px) 和 (max-width: 979px)‘ 开始，为最小宽度为 768 像素和最大宽度为 979 像素的设备设置样式。@media all and (min-width: 900px) {}也是最小宽度为900像素的，@media all and (max-width: 900px) {}最大宽度为900像素的。 @media all and (max-width: 900px) {
*{margin:0;padding:0;}
article{margin: 0 auto;width: 1348px;height: 1733px;}
header{width:1348px;height:51px;}
header img{margin-left: 5px;margin-top: 10px;}
header ul{list-style: none;margin-left: 0px;margin-top: 15px;}
header ul li{margin-left: 20px;margin-top: 10px;}
header ul li:hover{background: darkgray;}
header ul li a{text-decoration: none;color: grey;}
nav{width: 800px;height: 356px;margin-top: 200px;width: 50%;}
nav img{width: 800px;height: 356px;width: 50%;}
#content{width: 1348px;height: 1325px;}
#content-title{width: 300px;height: 128px;}
#content-title h4{margin-top: 35px;margin-bottom: ;}
#content-lesson{width: 1348px;height: 388px;}
#windmil-line1{
width: 80px;height: 3px;background: yellow;position: absolute;
top: 60px;
}
#windmil-line2{
width: 3px;height: 80px;background: yellow;position: absolute;
top: 10px;left: 56px;
}
</style>
</head>
<body>
<article>
<header>
<img src="img/logo.png" />
<img src="img/floor1.png" id="rose"/>
<ul>
<li><a href="#"><img src="img/home.png">首页</a></li>
<li><a href="#"><img src="img/list.png">资讯</a></li>
<li><a href="#"><img src="img/fire.png">案例</a></li>
<li><a href="#"><img src="img/info.png">关于</a></li>
</ul>
</header>
<nav>
<img src="img/slide1.png" />
</nav>
<section id="content">
<section id="content-title">
<h4>为什么选择飘城企业培训</h4>
<p>强在的师资历力量,完美的实战管理课程,让您的企业实现质的鹏飞</p>
</section>
<section id="content-lesson">
<section id="content-lesson-left">
<dl id="lesson-left">
<dt><img src="img/tab1-1.png"></dt>
<dd><a href="#"><h4>课程内容</h4></a></dd><br />
<dd><a href="#"><del>某部:高校不知名的讲师编写,没有任何实战价值的教材</del></a></dd>
<dd><a href="#">我们:知名企业家,管理学大师联合编写的具有实现性教材</a></dd>
</dl>
</section>
最后是用百分比的方法来显示%,不要用px来显视
以上是关于深入解析响应式布局的主要内容，如果未能解决你的问题，请参考以下文章