---- http://bcdonline.net/su-dung-co-ban-ve-responsive-web-design/
---- http://vnwebmaster.com/html-vs-browser/11684-11-cong-cu-huu-ich-cho-ban-lam-responsive-web-design.html
Cấu trúc trong file HTML mình làm demo là thế này:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <!--<html> <head> </head> <body> <div class="wrap"> <div class="header"> <h1>LOGO</h1> <div class="nav"> <ul> <li></li> </ul> </div> </div> <div class="content"> <h2></h2> <p> </p> </div> <div class="sidebar"> <h3>Sidebar</h3> <p></p> </div> <div class="footer"> <h3>© BCDONLINE.NET</h3> </div> </div> </body></html>--> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <!--/* Media Queries *//* 3 cot */@media screen and (max-width: 1024px) { .wrap{width:95%;} .header{float:left;width:20%;} .header h1{float:none;} .nav{float:none;} .nav li{float:none;} .content{width:50%;} .sidebar{width:30%;}} /* 2 cot */@media screen and (max-width: 980px) { .header{float:none;width:100%;} .header h1{float:left;} .nav{float:right;} .nav li{float:left;} .content{width:65%;} .sidebar{width:35%;}}/* 1 cot */@media screen and (max-width: 650px) { .header{text-align:center;} .header h1{float:none;} .nav{float:none;width:100%;} .nav ul{margin:0 auto;width:100%;} .content{width:100%;} .sidebar{width:100%;}}/* mobile */@media screen and (max-width: 480px) { .nav ul{width:100%;} .nav li{width:100%;} .sidebar{display:none;}}--> |
Không có nhận xét nào:
Đăng nhận xét