Cách thiết kế giao diện Reponsive Web tương thích trên nhiều thiết bị
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.
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 )
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
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 %.
/* 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.
0 nhận xét:
Đăng nhận xét