Tạo website reponsive đơn giản trong 3 bước với media query css3

Responsive web design bây giờ không còn là một cái gì lạ lẫm nữa. Với người mới nghe đến từ khoá reponsive web hay website reponsive nghe nó có vẻ lạ lẫm và phức tạp, nhưng nó lại thực sự đơn giản hơn bạn nghĩ nhiều. Để có thể giúp bạn nhanh chóng nắm bắt được với responsive design, Tôi cố gắng thực hiện bài viết này giúp bạn có thể phần nào ít bỡ ngỡ hơn với việc thiết kế website reponsive nó thực sự đơn giản chỉ cần bạn có kiến thức cơ bản về css đặc biệt là có kiến thức về css3. Nếu bạn còn bỡ ngỡ về khái niệm reponsive web bạn có thể tham khảo bài viết trước của tôi để hiểu nó: khác nhau giữa website reponsive và mobile web.

Bạn có thể xem qua demo sau khi chúng ta hoàn thành xong sản phẩm tại đây: demo sản phẩm. Với demo này để có thể xem rõ nhất về nó nếu bạn đang dùng firefox bạn có thể xem bài viết này của firefox hướng dẫn: Tool check reponsive firefox.

Bước 1. Thêm Meta Tag

Thẻ meta viewport nghĩa là một thẻ thiết lập cho trình duyệt hiển thị tương ứng với kích thước màn hình. Chẳng hạn như ví dụ trên, có nghĩa là bạn sẽ thiết lập trình duyệt hiển thị cố định và tương ứng trên tất cả các thiết bị dựa vào chiều rộng của thiết bị (device-width) và không cho phép người dùng phóng to (thiết lập initial-scale với giá trị cố định là 1). Đây là thẻ mình khuyến khích bạn sử dụng cho toàn bộ các dự án Responsive.

Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Internet Explorer 8 hoặc cũ hơn không hỗ trợ cho media query. Bạn có thể sử dụng media-queries.js hoặc respond.js để giúp cho IE hiểu và hỗ trợ nó.

Code:

<!--[if lt IE 9]>
<script src="css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Bước 2. HTML Structure

Trong ví dụ này tôi có một trang đơn giản gồm header, content, sidebar, và footer. Header có độ cao được cố định là 180px, content là 600px độ rộng và sidebar là 300px độ rộng.


page structure reponsive web

Bước 3. Media Queries

CSS3 media query là mẹo hay còn gọi là thủ thuật trong reponsive design. Nó giống như viết điều kiện if trong lập trình nói cho trình duyệt hiển thị trong độ rộng riêng biệt.

Đoạn code dưới đây cho phép hiển thị riêng dưới độ rộng 980px hoặc nhỏ hơn.

Code:

/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}

}

Tiếp tục ngay bên dưới cho kích thước 700px hoặc nhỏ hơn. Thay đổi #content và #sidebar để độ rộng là auto và bỏ đi float vì vậy chúng ta sẽ nhìn thấy nó là full width ở độ rộng màn hình 700px hoặc dưới nó.

Code:

/* for 700px or less */
@media screen and (max-width: 700px) {

#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}

}

Cho độ rộng 480px hoặc nhỏ hơn (mobile screen), reset độ cao #header là auto, thay đổi h1 để kích thước font là 24px và ẩn #sidebar.

Code:

/* for 480px or less */
@media screen and (max-width: 480px) {

#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}

}

Bạn có thể viết nhiều luật css hơn cho nhiều các loại màn hình khác nhau miễn sao đạt được mục đích của bạn chứ không hạn 3 luật media query css như tôi làm. Vì chỉ có 3 luật cho đơn giản và dễ hiểu về nó.

Chúc các bạn thành công!

Nguồn: vnfit.com/tao-website-responsive-don-gian-trong-3-buoc-voi-media-query-css3