Ps：（1）如果你不想看前边，直接跳过，看第四点！
（2）为什么定义七彩？七彩七种布局，可任意删减！
记得去年做一个网站“反应品牌设计”的时候，客户对我的要求还是相当高的，一方面前端要求挺高，另一方面还要求自适应的实现等等。设计师的眼光比较指挑剔，和我们常人的眼光不同！其中自适应我当时没有做过，虽然听说过而且去年也研究过一段时间，但是感觉还不够深入，总感觉哪里错误了！也懂Bootstrap，但BS也做不出那种效果！再后来做完第一版内容的时候，因为忙我就没有再没有研究过……
昨天看到了一个网站叫“蒸气多”，网站虽然不出名（不是这打广告哈）。但我打开后，吃惊了一下！
（一）网站的背景是高级灰，让人很舒服；
（二）网站采用自适应设计，当小页面时有一部分内容不显示
（三）列表页、内容页简单且舒服
（四）注册页、登录页弹窗而平滑设计，搜索弹出页很漂亮
（五）这个网站居然采用Wordpress
我很欣赏这个网站的制作风格！做了好几年前端的我，好多特效我也做不出来。说了这么多了，该书归正转了！我的这个就是这个网站的自适应模块！
这篇文章代码量虽然不多，但花了我一天的时间！现在书归正传，开始写代码！
一：分辨率描述（如果不感兴趣这点可以不看）
如今的终端好多啊！简单是乱花渐入迷人眼！包括电脑、平板电脑、手机、电视等。而不同的终端相关的配置却也不相同！
1、电脑的分辨率：
1440*900、1366*768、1360*768、1280*800、1280*720、1024*768、800*600等。
2、手机的分辨率：
128*128、128*160、240*320（常见2.0 2.2 2.4 2.8寸屏手机使用）
320*240（常见2.4寸屏手机使用）
240*400（常见3.0寸屏手机使用）
320*480（主流屏常见3.2 3.5寸屏手机）
360*640（诺基亚常见）
480*800（常见4.0寸屏使用）
480*854（常见3.7寸屏使用）
3、平板的分辨率：
960*540（QHD常见4.0 4.3 4.5寸使用）
960*640（常见苹果机使用）
1136*640（常见苹果5使用）
1280*720（HD主流屏常见4.3 4.5 4.7 5.0 5.5 5.7 6.0寸屏使用）
1280*768（常见4.5寸屏使用）
1280*800（常见三星5.3寸及平板电脑使用）
1024*600（常见7.0寸屏平板电脑使用）
1024*768（常见LG5.0寸屏及7.9寸9.7寸平板电脑使用）
1920*1080（FHD主流屏常见4.7 5.0 5.0 5.7 6.0寸手机及电视使用）
1920*1280 （常见9.0寸平板电脑使用）
1920*1200（常见10.1寸平板电脑及酷派大神7.0使用）
2048*1539（常见苹果iPad 及国产一些平板使用）
4、电视的分辨率：
2560×1440（2k屏）
4096×2160（4K屏常见电视使用）
5、iphone的分辨率：
| 设备 | 屏幕尺寸 | 分辨率(pt) | Reader | 分辨率(px) | 渲染后 | PPI |
| iPhone 3GS | 3.5吋 | 320x480 | @1x | 320x480 | 163 | |
| iPhone 4/4s | 3.5吋 | 320x480 | @2x | 640x960 | 330 | |
| iPhone 5/5s/5c | 4.0吋 | 320x568 | @2x | 640x1136 | 326 | |
| iPhone 6 | 4.7吋 | 375x667 | @2x | 750x1334 | 326 | |
| iPhone6 Plus | 5.5吋 | 414x736 | @3x | 1242x2208 | 1080x1920 | 401 |
综述以上，分辨率（我们这里只说宽度）共有以下18种：128、240、320、360、480、640、750、960、1024、1080、1136、1242、1280、1360、1366、1440、1920、2048
二：自适应所用的知识
1、HTML插入meta
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2、媒体查询代码 media query两种方法
判断媒体类型，引用不同的样式表
<link rel=”stylesheet” media=”screen and (判断条件)” herf=”需要调用的样式表文件” />
通过设定屏幕的判断条件，调用对应的css文件。该实例多用于整页面不同风格的css调用与选取，使用该方法可能需要为一个页面制作多份个css文件。如：
screen and (min-width:900px) and (max-width:1024px)
判断媒体类型，执行不同的css样式属性，如：
@media only screen and (max-width:240px){
.box{width:200px;}
.title{color:red;}
}
注：用min-width时，小的放上面，大的在下面；
用max-width时，大的在上面，小的在下面。
所以我们用的时候，最好养成习惯与易读性，最好按max标准，如下：
@media screen and (max-width: 1300px){ //<=1300px的设备 }
@media screen and (max-width: 1220px){ //<=1220px的设备 }
@media screen and (max-width: 1170px){ //<=1170px的设备 }
我们要用的大多数是常用的分辨率，不用那些太偏的。先看一下我们常用的显示器的分辨率有哪些？
三：我们怎么定义才最合适
在我的笔记本电脑，有这几种设置方式 1366px,1360px,1280px,1024px,800px。因为现在800px的体验太差了，而且几乎都不存在了，所以我们把它略去了。而手机版960px是一个界限！1360px和1366px只差6px ,因此我们只用1360px。还有一种1136px和1440px也是常用的！
最终我们就应该设置五种分辨方式，分别是等于1440px、等于1360px、等于1280px、等于1136px、等于1024px、等于960px（手机版苹果常用的），几本是每100px之间一个定义。
因为我们做网页时，左右都要留白，因此我们定义分别是等于1400px、等于1300px、等于1200px、等于1100px、等于1000px（也有人定义980px）、等于960px（手机版苹果常用的），电脑版差不多每100px之间一个定义。
我们在做网页的时候，比如我现在最大的显示器像素是2048px，而目前的网页最大的分辨率为1440px，因此我们定义网页显示最大为1440px。
例：总宽度为屏幕宽度，container是容器宽度，left是左边，right是右边的。
移动时动态效果如下：
屏幕大于1440px时，拖动浏览器变小时，会逐渐看到效果！
我是这样做的 min+(max-min)/2 ,比如说1024+(1280-1024)/2=1152。其他计算广法类同！
到了2048px和1440px之间，一直是1440px，container变成1440px，left为68%，right为30%且背景为红；
到了1440px和1360px之间（左右结构），比如说1400px，container变成1300px，left为58%，right为40%且背景为橙；
到了1360px和1280px之间（左右结构），比如说1320px，container变成1200px，left为48%，right为50%且背景为黄；
到了1280px和1136px之间（左右结构），比如说1208px，container变成1060px，left为38%，right为60%且背景为绿；
到了1136px和1024px之间（左右结构），比如说1080px，container变成1000px，left为28%，right为70%且背景为蓝；
到了1024px和960px之间（左右结构），比如说992px，container变成961px，left为18%，right为80%且背景为靛；
到了960px及以下，container宽度为100%,left消失，right为100%且背景为紫；
这样我们应用就比较好实现了，设置如下：
@media only screen and (max-width: 2048px){ }-红
@media only screen and (max-width: 1400px){ }-橙
@media only screen and (max-width: 1320px){ }-黄
@media only screen and (max-width: 1208px){ }-绿
@media only screen and (max-width: 1080px){ }-蓝
@media only screen and (max-width: 992px){ }-靛
@media only screen and (max-width: 960px){ }-紫
四：布局应用
下载地址：http://git.oschina.net/hongweizhiyuan/selfadaption
演示地址：http://www.ijquery.cn/study/demoqianduan/selfadaption/index.html
下图图示分辨率1360px-1440px全屏显示
下图图示分辨率1024px-1136px之间
下图图示iphone6手机的效果（紫）
1、HTML代码（这里的颜色及距离我写成了行列式）
<!doctype html> <html> <head> <meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>CSS第8款：七彩自适应网页-红橙绿蓝靛紫可合并</title> <!-- 360内核浏览器访问 --> <meta name="renderer" content="webkit"> <!-- 拒绝百度手机转码 --> <meta http-equiv="Cache-Control" content="no-siteapp"/> <!-- 加载CSS样式 --> <link href="//cdn.bootcss.com/normalize/3.0.3/normalize.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css"> <!-- 加载Jquery库 --> <script src="hjs/jquery.min.js"></script> </head> <body style="background: #f4f5f7;"> <div class="container" style="margin-top:30px;"> <!--left start--> <div class="left fl"> <div style="background-color: #fff;height:200px;"> 内容左一 </div> <div style="height:20px;"></div> <div style="background-color: #fff;height:200px;"> 内容左二 </div> </div> <!--left end--> <!--right start--> <div class="right fr" style="height:420px;"> 内容右一 </div> </div> <!--right end--> </body> </html>
2、CSS样式
.fl {
float: left;
}
.fr {
float: right;
}
.container {
max-width: 1440px;
width: 100%;
margin: 0 auto;
box-sizing: border-box
}
@media only screen and (max-width: 2048px){
.container {
width: 1440px;
}
.left {
width:68%;
}
.right {
width:30%;
background:#FF0000;/*红*/
}
}
@media only screen and (max-width: 1400px){
.container {
width: 1300px;
}
.left {
width:58%;
}
.right {
width:40%;
background:#FFA500;/*橙*/
}
}
@media only screen and (max-width: 1320px){
.container {
width: 1200px;
}
.left {
width:48%;
}
.right {
width:50%;
background:#FFFF00;/*黄*/
}
}
@media only screen and (max-width: 1208px){
.container {
width: 1060px;
}
.left {
width:38%;
}
.right {
width:60%;
background:#008000;/*绿*/
}
}
@media only screen and (max-width: 1080px){
.container {
width: 1000px;
}
.left {
width:28%;
}
.right {
width:70%;
background:#0000FF;/*蓝*/
}
}
@media only screen and (max-width: 992px){
.container {
width: 961px;
}
.left {
width:18%;
}
.right {
width:80%;
background:#4B0082;/*靛*/
}
}
@media only screen and (max-width: 960px){
.container {
width: 960px;
}
.left {
display:none;
}
.right {
width:100%;
background:#800080;/*紫*/
}
}