Tìm hiểu về giao diện Responsive trong thiết kế web

Tìm hiểu về giao diện Responsive trong thiết kế web

10/10/2017
Thiet Ke Responsive 1024x640

Thiet Ke Responsive 1024x640

Thế giới tạo hình luôn thay đổi theo thời gian, cái cũ đang dần bị lu mờ bởi cái mới, để phù hợp với xu thế thẩm mỹ. Và giao diện cũng vậy, nó chẳng khác gì một tác phẩm nghệ thuật tạo nên những cung bậc cảm xúc cho người sử dụng, người thiết kế cũng như một họa sỹ phải biết vẽ lên những đường nét điêu luyện cũng như sáng tạo ra cái độc đáo nhất. Bản thân mỗi người đều có cảm nhận riêng nhưng nhìn chung tất cả chỉ hướng về tính khả dụng, thẩm mỹ. Trong ngành thiết kế web đòi hỏi có sự trùng khớp giữa thẩm mỹ và tiện dụng. Chính vì vậy, trong những năm gần đây đã xuất hiện kỹ thuật thiết kế web Responsive, nhưng vẫn có một số độc giả chưa thực sự nắm được cách một giao diện web có thể hiển thị giao diện Responsive là như thế nào, nên trong bài này chúng tôi sẽ giải thích và hướng dẫn các bạn áp dụng Responsive vào trang web của mình.

Thiet Ke Responsive

Trong bài viết này chúng tôi chú trọng vào giao diện hiển thị Responsive chứ không đi sâu vào kiến thức cơ bản nào khác, do vậy để có thể hiểu một cách trọn vẹn tốt nhất bạn cần nên chuẩn bị kiến thức căn bản HTML, CSS (HTML5, CSS3).

Responsive là gì?

Responsive là một thuật ngữ hay tính từ chỉ một trang web có thể hiển thị và tương thích với mọi trình duyệt. Ví dụ thông thường một trang web có độ hiển thị chuẩn trên màn hình máy tính ở Việt Nam là 960px, nhưng chắc chắn nó sẽ hiển thị trên màn hình smartphone theo chiều rộng là 320px – 420px, đấy là so với những chiếc smartphone màn hình nhỏ, còn với những chiếc smartphone lớn hơn thì sẽ có hiển thị khác.

– Một điều quan trọng nữa thiết kế web theo kiểu truyền thống người design thường lấy px(pixel) để làm đơn vị tính chiều ngang của một website, còn áp dụng kỹ thuật Responsive Designer thường lấy % để định dạng chiều rộng của trang web, với mục đích tối ưu và thuận tiện xử lý.

– Cách thức hoạt động của Responsive là chúng ta sẽ viết code CSS để cho trình duyệt hiểu và thực thi nó trên các kích thước trình duyệt nhất định. Ví dụ như các bạn có thể code và thiết lập một đoạn CSS nào đó chỉ áp dụng cho các trình duyệt có kích thước chiều rộng tối đa là 640px. Responsive sử dụng kỹ thuật thiết kế được xử lý từ client-side chứ không thông qua truy vấn đến máy chủ để xử lý (server – side) nên nó có một nhược điểm là làm trình duyệt của bạn phải mất thời gian chờ đợi để xử lý CSS.

Vậy làm thế nào có thể áp dụng Responsive lên giao diện của một trang web

Để cho trang web của bạn hiển thị được Responsive, chúng ta có hai bước như sau:

Bước 1. Khai báo trường meta viewport trên web

Trước tiên bạn cần đặt thẻ này vào trong cặp <head> trên trong mã HTML của trang web của bạn.

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

Thẻ meta viewport nghĩa là một thẻ thiết lập hiển thị cho trình duyệt tương ứng với kích thước của màn hình. Chẳng hạn như ví dụ trên, bạn có thể định dạng trình duyệt hiển thị cố định và thích hợp 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 thể phóng to, thu nhỏ, theo chiều ngang của màn hình (thiết lập initial-scale với giá trị cố định là 1.0).

Ngoài ra thẻ meta viewport này còn có các giá trị mình có thể giải thích như sau:

– Width: Để thiết lập chiều rộng của viewport.

– Device-width: Đây là chiều rộng cố định của thiết bị khác nhau.

– Height: Định dạng chiều cao của viewport.

– Device-height: Đó là chiều cao cố định của thiết bị.

– Initial-scale: Định dạng mức phóng to trình duyệt lúc ban đầu, với giá trị là 1 có nghĩa là không phóng to, khi giá trị được thiết lập, định dạng không cho phép người dùng phóng to vì nó đã được cố định.

– Minimum-scale:Là mức phóng to tối thiểu đặt cho thiết bị với trình duyệt.

– Maximum-scale: Mức phóng to tối đa cho một thiết bị với trình duyệt.

– Muser-scalable: Cho phép người dùng có thể phóng to, giá trị thường là yes hoặc no.

Bước 2. Viết CSS cho chiều rộng cho các thiết bị

Tại bước này, chúng ta sẽ bắt đầu viết CSS tương ứng cho từng mức chiều rộng hoặc chiều cao của thiết bị, thường thì chúng ta chỉ viết dựa theo chiều rộng và được tính trên đơn vị là pixel(px). Nhiều người có thể tính dựa trên đơn vị đo là em, rem, DPI, phần trăm(%),… nhưng nếu bạn là người mới thì có thể dùng pixel (px) cho dễ.

Để viết CSS tương ứng cho chiều rộng của trình duyệt sử dụng cú pháp @media trong CSS3 (@media query) giúp ta có thể phân các đoạn CSS theo kích thước màn hình. Kích thước chúng ta đang cần phân chia chính là độ rộng màn hình như sau:

– Các CSS này dùng cho toàn bộ website và desktop

body {

   background: #fff;

   color: #ccc;

}

– Các CSS này cho Ipad ngang(1024 x 768)

@media screen and (max-width: 1024px){

    #wrapper{ width: 100%;}

}

– Các CSS này cho Tablet nhỏ(480 x 640)

@media screen and (max-width: 480px){

}

– Các CSS này cho Iphone(480 x 640)

@media screen and (max-width: 320px){

}

– Các CSS này Smartphone nhỏ

@media screen and (max-width: 240px){

}

Tóm lại một số kiến thức để bạn có thể viết được giao diện CSS Responsive

Ngoài đơn vị px ra, thì các đơn vị đo chiều dài trong web tốt nhất nên là phần trăm(%). Hay nói đúng hơn là sử dụng đơn vị có tính tương đối.

Các bạn nên sử dụng max-width thay vì width để tránh cố định chiều rộng của trang web.

Sử dụng thuộc tính display: none cho các thành phần cần ẩn đi ở từng thiết bị mà mình muốn ẩn. Và display: block ở các thiết bị mình cần hiển thị ra. Bạn có thể sử dụng tùy chọn! important nếu cần đè viết đè CSS. Căn bản là chỉ có vậy, thực ra Responsive thì chỉ căng nhất là phần thiết kế menu nhưng khi thực hành nhiều bạn sẽ nắm rõ chi tiết hơn. Trên đây là những cách chia sẻ nhỏ để các bạn có thể hiểu rõ về thiết kế web áp dụng kỹ thuật Responsive. Nếu các bạn có thắc mắc gì thì đừng ngần ngại mà hãy liên hệ với chúng tôi để được nhận dịch vụ chăm sóc khách hàng nhiệt tình và miễn phí.