css实现响应式布局的相关内容
所以我就在做自适应的时候查了一些资料
首先我发现一个问题:有响应式布局和自适应布局两种布局效果
简单来说,响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用户体验是一样的 ;而自适应布局同一页面在不同设备可能呈现不一样的页面效果,比如两张图并排排列变成两张图上下排列
总体来说,现如今响应式布局使用得更多,而不用框架实现自适应其实是有很多方法:
一、用CSS中的媒体查询
其中使用@media也有三种方式
-
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>
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的固定高宽比的列子
原博地址: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可能不好用?没试过),有时间真想再重新写一遍这个自适应,都是上个月写的了。。。
还有一些东西没整理出来 先去工作咯