首页 > 代码库 > HTML5响应式布局

HTML5响应式布局

2024-09-21 10:46:44   288人阅读

1.含义

网站兼容多个终端。比如以前没有使用响应式布局的网站，你在不同的浏览器，或者计算机和手机看到的(大小)效果是不一样的（这种不一致性不是前端开发所想要的结果）。而使用了响应式布局，就可以兼容各个浏览器，消除不一致性。

 

2.实现

css媒介查询：

  1. 设备宽高：device-width，device-height。（物理大小）
  2. 渲染窗口宽高：width，height。
  3. 手持设备方向：ortation。
  4. 手持设备分辨率：resolution。

使用方法：

  1. 外联和内嵌

3.代码示例

　　实现响应式布局其实很简单，但是响应式布局的缺点就是：代码累赘，影响打开网页的速度。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>响应式布局实例</title>
 5     <meta charset="utf-8">
 6     <meta name="viewport" width="device-width,initial-scale=1.0">
 7     <style type="text/css">
 8         *{
 9             margin:0px;
10             padding: 0px;
11         }
12 
13         .head,.contain,.foot{
14             margin: 10px auto;
15             background-color: red;
16         }
17 
18         .head,.foot{
19             width: 100%;
20             height: 100px;
21         }
22 
23         .contain{
24             width: 100%;
25             height: 500px;
26             background-color: transparent;
27         }
28 
29         .left,.middle,.right{
30             float: left;
31             margin: auto 5px;
32             background-color: blue;
33         }
34 
35         .left,.right{
36             height: 500px;
37             width: 27%;
38         }
39 
40         .middle{
41             height: 500px;
42             width: 40%;
43         }
44 /*屏幕大小在100px，到960px之间，没有显示*/
45         @media screen and (min-width: 100px) and (max-width: 960px){
46             *{
47                 display: none;
48             }
49         }
50 
51 
52 
53 
54 
55 
56     </style>
57 </head>
58 <body>
59 <div class="head"></div>
60 <div class="contain">
61     <div class="left"></div>
62     <div class="middle"></div>
63     <div class="right"></div>
64 </div>
65 <div class="foot"></div>
66 </body>
67 </html>

以上是非常简单的一个响应式布局，仅供参考。

HTML5响应式布局


联系
我们