三欄式遇上手機平板時的更動
使用 media query 以及寬度使用百分比
不用而外全部寫一個 for 手機或平版的 css
1 | *{ |
2 | margin: 0; |
3 | padding: 0; |
4 | box-sizing: border-box; |
5 | list-style: none; |
6 | } |
7 | |
8 | .wrap{ |
9 | max-width: 960px; |
10 | margin: 0 auto; |
11 | } |
12 | |
13 | ul{ |
14 | font-size: 0px; |
15 | } |
16 | |
17 | ul li{ |
18 | width: 33.3333%; |
19 | display: inline-block; |
20 | font-size: 16px; |
21 | padding: 5px; |
22 | } |
23 | |
24 | /*RWD*/ |
25 | |
26 | @media(max-width: 768px){ |
27 | ul li{ |
28 | width: 50%; |
29 | } |
30 | } |
31 | @media(max-width: 414px){ |
32 | ul li{ |
33 | width: 100%; |
34 | } |
35 | } |
手機
平板
電腦
