前端之响应式布局
程序员文章站
2024-02-04 19:28:40
实现效果：根据缩放比例不同或者浏览设备不同显示不同的css布局 代码如下： ......
实现效果：根据缩放比例不同或者浏览设备不同显示不同的css布局
代码如下：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>响应式布局</title>
6 <style>
7 @media (min-width: 400px) {
8 .ww{
9 width:50%;
10 background-color: dodgerblue;
11 float: left;
12 }
13 }
14 @media (min-width: 800px) {
15 .ww{
16 width:50%;
17 background-color: red;
18 float: left;
19 }
20 }
21
22 </style>
23 </head>
24 <body>
25 <div class="ww">media</div>
26 <div class="ww">666</div>
27 </body>
28 </html>