Công nghệ làm Web năm 2014 đang hướng tới các kiểu giao diện thiết kế phẳng với Reponsive Web hiển thị tốt trên nhiều thiết bị. Đây là 1 công nghệ mới khá thú vị cho các nhà thiết kế Website chuyên nghiệp.

Cách thiết kế giao diện Reponsive Web tương thích trên nhiều thiết bị

Reponsive là gì? Nôm na rằng là 1 kiểu giao diện tự co dãn, hiển thị tốt trên nhiều trình duyệt Web hoặc trên nhiều thiết bị lướt Web như iphone, laptop, PC, điện thoại di dộng...

Ở bài ngày hôm nay, ThaiAiTi sẽ hướng dẫn cho các bạn các bước thiết kế 1 giao diện Reponsive Web đơn giản và nhanh chóng nhất.

Bước 1: Chèn đoạn Code sau vào sau <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Bước 2: Chèn đoạn code sau trên </head>
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

Bước 3: Viết CSS, bạn chèn tất cả trên ]]></b:skin> ( Với Blogspot )

Cách thiết kế giao diện Reponsive Web tương thích trên nhiều thiết bị

Trong ví dụ này, tôi có một bố cục trang cơ bản với một #header, #content nội dung, #sidebar, và #footer. Tiêu đề có height 180px cố định, nội dung #content width là 600px và #sidebar width là 300px.

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>

Bước 4 :CSS-Media Queries

- Đầu tiên, tôi CSS cho các div trên
#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; } }

Trên đây, chỉ là 1 ví dụ, bạn có thể làm với nhiều kích thước. Tất cả đơn vị khi bạn làm việc với Reponsive đều sử dụng %.
Chúc bạn thành công và có nhiều trải nghiệm với công nghệ mới hữu ích này.