css实现响应式布局的相关内容

时间 2019-12-09

标签 css 实现响应布局相关内容栏目 CSS 繁體版

原文原文链接

因此我就在作自适应的时候查了一些资料javascript

首先我发现一个问题：有响应式布局和自适应布局两种布局效果css

简单来讲，响应式布局就是不一样的设备不管大小布局都自动调整大小页面布局都同样能够保证不管什么设备用户体验是同样的；而自适应布局同一页面在不一样设备可能呈现不同的页面效果，好比两张图并排排列变成两张图上下排列html

整体来讲，现现在响应式布局使用得更多，而不用框架实现自适应实际上是有不少方法：java

1、用CSS中的媒体查询echarts

其中使用@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属性用于设置查询方式

下面我利用@media screen实现了一个简单响应式页面：

一、先引入 <meta name="viewport" content="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） flex
maximum-scale：容许用户缩放到的最大比例（默认设置为1.0） url
user-scalable：用户是否能够手动缩放（默认设置为no，由于咱们不但愿用户放大缩小页面）

二、其中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>

三、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 }

四、我后期简单加了Echarts 就不贴了

五、这是效果图

1920*1080

其余设备：

2、在网上看到过一个设置div的固定高宽比的列子

原博地址：https://blog.csdn.net/qq_37016928/article/details/80558329

博主说，若是值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，即便对于 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可能很差用？没试过），有时间真想再从新写一遍这个自适应，都是上个月写的了。。。

还有一些东西没整理出来先去工做咯