Xem nhiều nhất
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Trình duyệt IE8 trở xuống không hỗ trợ media query. Bạn có thể sử dụng media-queries.js hoặc respond.js để hỗ trợ.<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
HTML code:<div id="pagewrap">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<h2>Content</h2>
</div>
<div id="sidebar">
<h3>Sidebar</h3>
</div>
<div id="footer">
<h4>Footer</h4>
</div>
</div>
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
#header {
height: 180px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 300px;
float: right;
}
#footer {
clear: both;
}
Sau đó, tôi sẽ sử dụng CSS3 media query, với viewport từ 980px trở
xuống , màn hình sẽ hiển thị 2 cột với width của #content là 65% và
#sidebar là 30%/* 980px hoặc nhỏ hơn */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
Và với viewport 700px trở xuống , ta set giá trị width của #content
và #siderbar là auto , bỏ float đi để hiển thị 1 cột full width/* 700px hoặc nhỏ hơn */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
Cuối cùng , với viewport 400px trở xuống(mobile),ta set lại height
#header auto ,thay đổi font chữ h1 xuống 24px, và cho ẩn luôn sidebar/* 480px hoặc nhỏ hơn */
@media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
Bạn có thể viết bao nhiêu media query tuỳ ý ,trong ví dụ này tôi chỉ viết 3 media queries.