所以我就在做自适应的时候查了一些资料
首先我发现一个问题：有响应式布局和自适应布局两种布局效果
简单来说，响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用户体验是一样的 ；而自适应布局同一页面在不同设备可能呈现不一样的页面效果，比如两张图并排排列变成两张图上下排列
总体来说，现如今响应式布局使用得更多，而不用框架实现自适应其实是有很多方法：
一、用CSS中的媒体查询
其中使用@media也有三种方式
第一： 直接在CSS文件中使用
@media 类型 and (条件1) and (条件二)
{
css样式
}
@media screen and (max-width:980px ) {
body{
}
}
第二：使用@import导入
@import url("css/moxie.css") all and (max-width:980px);
第三，也是最常用的：使用link连接，media属性用于设置查询方式
<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/> 我们只需用到width衍生出的max-width这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式即可。
下面我利用@media screen实现了一个简单响应式页面：
1、先引入 <meta="viewport"="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
其中
- width = device-width：宽度等于当前设备的宽度
- height = device-height：高度等于当前设备的高度
- initial-scale：初始的缩放比例（默认设置为1.0）
- minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
- maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
- user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
2、其中html代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <link rel="stylesheet" href="css/css.css" type="text/css">
7 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
8 <meta name="format-detection" content="telephone=no,email=no"/>
9 <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
10 <script type="text/javascript" src="js/js.js"></script>
11 </head>
12 <body style="height:100%;width:100%">
13 <div class="header">
14 <img src="img/tittlebg01.png" width="20%">
15 <!-- <a href="#/login{{changeCityInfo.linkTxt}}" target="_blank" class="title">武陵山农业大数据平台</a> -->
16 <img src="img/tittlebg02.png" width="20%">
17 </div>
18
19 <section id="main">
20 <div class="left" id="a">
21
22 </div>
23
24 <div class="center" id="b">
25 </div>
26
27 <div class="right" id="c">
28 </div>
29
30 <div class="right" id="d">
31 </div>
32 </section>
33
34 <div class="space"></div>
35
36 <section id="main1">
37 <div class="left" id="a1" >
38 </div>
39
40 <div class="center" id="b1">
41 </div>
42
43 <div class="right" id="c1">
44 </div>
45
46 <div class="right" id="d1">
47 </div>
48 </section>
49
50 <div class="space"></div>
51
52 <section id="main2">
53 <div class="left" id="a2">
54 </div>
55
56 <div class="center" id="b2">
57 </div>
58
59
60 <div class="right" id="c2">
61 </div>
62
63 <div class="right" id="d2">
64 </div>
65 </section>
66
67 <div class="space"></div>
68
69 <section id="main3">
70 <div class="left" id="a3">
71 </div>
72
73 <div class="center" id="b3">
74 </div>
75
76
77 <div class="right" id="c3">
78 </div>
79
80 <div class="right" id="d3">
81 </div>
82 </section>
83
84 </body>
85 </html>
3、css代码如下
1 html,body{
2 padding: 0;
3 margin:0;
4 width: 100%;
5 height:100%;
6 font-size: 16px;
7 background:#05283b;
8 }
9
10 *{
11 margin: 0px;
12 padding: 0px;
13 font-family: "微软雅黑";
14 }
15
16 .header{
17 width:100%;
18 height:3%;
19 text-align: center;
20 font-size:1rem;
21 color:white;
22 }
23
24 section {
25 height:22%;
26 margin-top:1%;
27 }
28
29 section div {
30 float: left;
31 background: #895777;
32 height: 100%;
33 width: 24%;
34 margin-left:0.5%;
35 margin-right: 0.5%
36 }
37
38
39 @media only screen and (max-width: 1900px) {
40 section
41 {
42 width:100%;
43 }
44
45 }
46
47 @media only screen and (max-width: 1200px) {
48 .left,.center{
49 width:49%;
50 margin-left: 0.5%;
51 margin-right: 0.5%;
52 margin-top: 1%;
53 height: 100%;
54 }
55 .right{
56 width:49%;
57 margin-left: 0.5%;
58 margin-right: 0.5%;
59 margin-top: 1%;
60 height: 100%;
61 }
62 }
63
64
65 @media only screen and (max-width: 980px) {
66 section{
67 width:100%;
68 }
69 }
70
71 @media only screen and (max-width: 640px) {
72 section div{
73 width: 100%;
74 display: block;
75 height:180px;
76 line-height:100px;
77 margin-top: 3px;
78 }
79 }4、我后期简单加了Echarts 就不贴了
5、这是效果图
1920*1080
其他设备：
二、在网上看到过一个设置div的固定高宽比的列子
原博地址：
博主说，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，即使对于 padding-bottom 和 padding-top 也是如此。在计算 Overflow 时，是将元素的内容区域（即 width / height 对应的区域）和 Padding 区域一起计算的。换句话说，即使将元素的 overflow 设置为 hidden，“溢出”到 Padding 区域的内容也会照常显示。
综上两条所述，可以使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果。因为div 元素的宽度是其父元素宽度的百分比，所以将 padding-bottom 设置为它的百分比，即 33.98%。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值，从而实现需要的效果。
我也用这个方法写了一点，但是还存在一些问题，在一些设备上高宽比会很不一样，如下:
但我觉得div高宽成比例还是比较有意思的一个东西，有时间还想再调调
还有flex，JS获取高度赋值之类的（不过我猜这样echarts可能不好用？没试过），有时间真想再重新写一遍这个自适应，都是上个月写的了。。。
还有一些东西没整理出来 先去工作咯
