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可能很差用？沒試過），有時間真想再從新寫一遍這個自適應，都是上個月寫的了。。。

還有一些東西沒整理出來先去工做咯