Responsive CSS là gì?
Responsive CSS giúp cho các bạn thiết kế một giao diện website tương thích trên mọi thiết bị như Desktop, tablet và smartphone…
Đây không chỉ là một kỹ thuật thiết kế web mà còn là một xu hướng trong một thời đại bùng nổ thiết bị di động và nhu cầu người dùng đòi hỏi ngày càng cao.
Sử dụng Responsive CSS có lợi ích gì?
VD : http://m.ens.vn (Đây là website ngày xưa để xem bằng mobile)
http://ens.vn (Sau khi sử dụng Responsive CSS)
Vậy thực hiện nó như thế nào?
Tôi sẽ không nói dài dòng để các bạn phải chờ lâu và cảm thấy rắc rối.
Trước tiên chúng ta sẽ bắt đầu với một Fluid Grid layout
Fluid grid tiến một bước xa hơn so với liquid layout truyền thống. Thay vì thiết kế một layout dựa trên pixel cố định hay giá trị phần trăm tùy ý, fluid grid được thiết kế kỹ càng hơn theo tỷ lệ phần trăm. Theo cách này, khi một layout được thu gọn trên màn hình điện thoại hay trải rộng trên một màn hình lớn, tất cả mọi thành phần trong layout đều tự thay đổi kích thước để tương thích với nhau.
Để tính được tỷ lệ cho thành phần của từng trang,bạn cần phải chia các nhân tố mục tiêu theo từng bối cảnh. Hiện tại, cách tốt nhất để làm điều này là tạo ra một bản mockup chính xác trên phần mềm như Photoshop. Nhờ đó, có thể đo được các phần trong trang và chia cho bề rộng của toàn trang. Ví dụ, nếu layout có kích thước bề ngang là 960 pixel, và bề rộng của thành phần mục tiêu là 350 pixel thì giá trị phần trăm sẽ là 36,45833333333333%.
Công thức tính bề rộng của thành phần mục tiêu như sau: 350/960=0. 36,45833333333333 <=> 36,45833333333333%.
Nếu kết quả này ra số lẻ thì bạn không được làm tròn, hãy giữ nguyên con số này vì trong tính toán các con số cần có độ chính xác cao.
Fluid grid là một phần rất quan trọng khi tạo ra responsive design. Khi bề rộng của màn hình quá hẹp thì giao diện có thể bị bể. Ví dụ, layout ba cột không thích hợp cho màn hình nhỏ của smartphone hoặc tablet…. Thật may vì responsive css có thể xử lý việc này bằng thuộc tính media queries được hỗ trợ bằng css3.
Media queries CSS 3
Media queries trong css3 giúp website của bạn có thể tự thay đổi bố cục theo yếu tố màn hình, nghĩa là bạn sẽ phải định nghĩa ra một loạt các độ phân giải của từng màn hình, khi người duyệt website trên các thiết bị khác nhau, thì hệ thống tự lấy CSS những thuộc tính css mà bạn đã định nghĩa cho độ phân giải của thiết bị đó.
Đây là một số gợi ý về kích thước màn hình chúng ta thường gặp
Để chi tiết hơn tôi sẽ cho bạn một ví dụ:
Code HTML
<div class=”maincontent”>
<div class=”desktop”>
desktop
</div>
<div class=”tablet2laptop”>
tablet laptop
</div>
<div class=”tablet”>
tablet
</div>
<div class=”phone”>
phone
</div>
</div>
Code CSS
<style type=”text/css”>
.maincontent > div /*Mặc định ẩn các div nội dung của maincontent*/
{
display: none;
}
@media (min-width: 1200px) /*Nếu bề rộng màn hình lớn hơn 1200px thì áp những thuộc tính css này vào trang web*/
{
.maincontent
{
width: 1200px;
}
.desktop
{
display: block;
}
}
@media (min-width: 768px) and (max-width: 979px) /*Nếu bề rộng màn hình lớn hơn 768px và nhỏ hơn 979px thì áp những thuộc tính css này vào trang web*/
{
.maincontent
{
width: 768px;
}
.tablet2laptop
{
display: block;
}
}
@media (max-width: 767px) /*Nếu bề rộng màn hình nhỏ hơn 767px thì áp những thuộc tính css này vào trang web*/
{
.maincontent
{
width: 100%;
}
.tablet2laptop
{
display: block;
}
}
@media (max-width: 480px) /*Nếu bề rộng màn hình nhỏ hơn 480px thì áp những thuộc tính css này vào trang web*/
{
.maincontent
{
width: 100%;
}
.tablet2laptop
{
display: none;
}
.phone
{
display: block;
}
}
</style>
Dựa vài ví dụ trện bạn có thể định nghĩa ra kích thước màn hình bất kỳ mà bạn muốn (Cho mobile hoặc chỉ cho tablet) tuy nhiên tôi khuyến khích bạn hãy dành thời gian chăm chút cho sản phẩm của mình chạy tốt trên mọi thiết bị. Một số website mà tôi đã trải nghiệm với Responsive CSS
Kết luận: Tổng hợp những gì tôi đã trình bày các bạn nên chú ý đến những vấn đề sau:
ĐC: Số C7b/137 Phạm Hùng, Bình Hưng, Bình Chánh, TP.HCM (Gần cầu Chánh Hưng Q8)
CHI NHÁNH: Số 20, Đường số 20, P. Bình Trưng Đông, Quận 2
ĐT: 090 333 1985 – 09 87 87 0217 Cô Mượt