(HN) -
(TP.HCM)
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