一、原则：
1.移动优先：在设计的初期就要考虑到页面如何在多终端展示
2.渐进增强：充分发挥硬件设备的最大功能（比如低端浏览器不支持css3，但是高端浏览器支持css3）
二、如何实现响应式布局
三种方案：
1 . CSS3 Media Query 媒体查询
2 . 接触原生JS （针对低端浏览器，成本高 不推荐）
3 . 第三端开源框架 （可以很好的支持浏览器响应式布局，bootstrap）
三、Media Query
1.常见的属性
device-width、device-height——屏幕宽高（浏览器的物理宽高）
width、height ——渲染窗口宽高(可视区域的实际大小，可伸缩)
orientation ——设备方向（竖屏--行数更多、横屏——列数更多）
resolution ——设备分辨率 （如高分辨率终端 ipad Air）
2.基本语法
外联CSS语法、内联样式的语法
简单实现：当媒体设备尺寸大于480px时，采用内联样式
当媒体设备尺寸小于480px时，采用style.css样式
<link type="text/css" rel="stylesheet" href="style.css" media="only screen and (max-width:480px)">
<style>
@media screen and (min-width:480px){
body {
background-color: #da4e49;
}
}
</style>或者：
<link type="text/css" rel="stylesheet" href="style1.css">
<link type="text/css" rel="stylesheet" href="style2.css"> ————————————————————————————————————————————————————————
@media screen and (max-width:480px){ //style1.css
body {
background-color: #0081c2;
}
}
——————————————————————————————————————————————————————————
@media screen and (min-width:480px){ //style2.css
body {
background-color: #da4e49;
}
}
常见媒体查询
因为 Apple 首次向市场推出了用户智能手机和平板电脑产品，所以下列大多数媒体查询都是基于这些型号的设备。
如果目标是横向模式智能手机，则使用： @media (min-width: 321px) { … }
如果目标是纵向模式智能手机，则使用： @media (max-width: 320px) { … }
如果目标是横向模式 Apple iPad，则使用： @media (orientation: landscape) { … }
如果目标是纵向模式 iPad，则使用： @media (orientation: portrait) { … }
您可能已经注意到了，iPad 上使用的是 orientation 媒体特性，而 width 用于 Apple iPhone 之上。主要是因为 iPhone 不支持 orientation 媒体特性。您必须使用 width 模拟这些方向断点。请参阅 参考资料，获取有关常见媒体特性的更多信息。
详见：https://segmentfault.com/a/1190000002713857
3 .确定如何组织媒体查询
第一个方法是为不同屏幕大小指定完全不同的样式表。优点是规则可以保存在独立样式表中，这使得显示逻辑能够清楚地划分出来，更便于团队进行维护。另一个优势是源代码分支之间的合并变得更为容易。但优点同时也是缺点。如果要为每个媒体查询创建单独的样式表，则无法将一个元素的所有样式表放在同一文件夹的同一位置。当改变一个 CSS 中的一个元素时，需要创建多个位置进行查看，这使得网站 CSS 的维护变得更加困难。
第二个方法是在现有样式表中使用媒体查询，该样式表就在定义其余元素样式表的位置的旁边。这种方法的优势是可以将所有元素样式保存在同一个位置。当在团队模式下工作时，这种做法可以创建更多源代码合并工作，但这是所有基于团队的软件开发都可以管理且常见的一部分。
4 .bootstrap自适应布局
注意：
*IE8 需要引入Respond.js 激活Media
*Respond.js必须部署在wampserver的域名下面，而不能部署在静态资源域下面（跨域问题）
*通常网站为了考虑到浏览器并发，静态资源通常会部署在cnd上，或者与wampserver不同的域名下面（跨域问题）
bootstrap提供了解决方案，最简单的方法就是把Respond.js和网站部署在同一域名下（respond.js需要跟bootstrap要在同一域名下。）
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--bootstrap要求-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<!--if it IE9-->
<!--<script src="http://oss.maxcdn.com/lib/respond.js/1.3.0/respond.min.js"></script>-->
<title></title>
<style>
.bg {
background-color: #006ccc;
border: 1px solid pink;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 bg">aaaaaaaaaaaaaa</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 bg">bbbbbbbbbbbb</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 bg">cccccccccccccccc</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 bg">dddddddddd</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 bg">eeeeeee</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 bg">fffffffff</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 bg">ggggggggg</div>
</div>
</div>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>5 . SASS 中的媒体查询
Ruby on Rails 中的内置支持有助于推进 Syntactically Awesome Style Sheets (SASS) 的盛行，使其在 Web 开发社区中迅速走强。关于 SASS 的详细讨论已超出了本文的讨论范围，但我会在基于 SASS 的样式表中简要介绍使用媒体查询的基础知识。请参阅 Resources，获取有关 SASS 的更多信息。
SASS 行为中的媒体查询与普通 CSS 中的完全相同，但有一个例外：它们可以嵌套在其他 CSS 规则中。当一个媒体查询嵌套在另一个 CSS 规则中时，会将规则置于样式表的顶层，如清单 11 所示。
清单 11. 嵌套的媒体查询
#header {
width: 400px;
@media (min-width: 800px) {
width: 100%;
}
}清单 11 中的示例将编译到清单 12 的代码中。
清单 12. 编译结果
#header {
width: 400px;
}
@media (min-width: 800px) {
#header {
width: 100%;
}
}
扫一扫
2053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
