Sunday, April 30, 2017

Cách thiết kế web giao diện Responsive chi tiết


THỦ THUẬT SEO

Bài liên quan

Nghệ thuật tạo hình luôn biến đổi theo thời gian, cái mới đang dần thay thế cho cái cũ, cập nhập mới để phù hợp với xu hướng thẩm mỹ mới. ...


Nghệ thuật tạo hình luôn biến đổi theo thời gian, cái mới đang dần thay thế cho cái cũ, cập nhập mới để phù hợp với xu hướng thẩm mỹ mới. Kể cả giao diện web cũng vậy, nó như là những 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 nét trìu tượng thâm thúy cũng như sáng tạo ra nét độc đáo nhất, bản thân mỗi người cũng có suy nghĩ và cảm nhận riêng nhưng nhìn chung đều hướng tới tính khả dụng, cái đẹp chân thực nhất. Trong ngành lập trình và thiết kế website cũng phải đòi hỏi có sự ăn khớp giữa thẩm mỹ và tính tiện dụng. Chính vì thế, trong những năm trở lại đây đã xuất hiện kỹ thuật thiết kế web Responsive, nhưng vẫn có một số bạn chưa thực sự hiểu rõ về một giao diện website có thể hiển thị chế độ Responsive là như thế nào, nên trong bài này mình sẽ giải thích và hướng dẫn  thật chi tiết để các bạn áp dụng Responsive vào website của mình.


Kiến thức để thiết kế ra giao diện Responsive


Trong bài viết này mình xin chú trọng vào phần giao diện hiển thị Responsive chứ không đi sâu vào các kiến thức cơ bản, do vậy để có thể hiểu một cách chọn vẹn tốt nhất bạn cần nên chuẩn bị trước 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 website có thể hiển thị và tương thích với mọi trình duyệt (có thể co dãn theo mọi kích thước trình duyệt). Ví dụ thông thường một website có chế độ hiển thị chuẩn trên màn hình Deskop ở Việt Nam là 960px hay 1024px, nhưng chắc chắn nó sẽ hiển thị trên màn hình điện thoại di dộng theo chiều rộng là 320px – 420px, đấy là so với những chiếc điện thoại màn hình nhỏ, còn với những chiếc điện thoại lớn hơn hay Ipad thì sẽ hiển thị khác.

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

- Phương thức hoạt động của chế độ Responsive là chúng ta sẽ viết CSS để mọi 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. Chẳng hạn các bạn có thể code và thiết lập một đoạn CSS nào đó chỉ sử dụng cho các trình duyệt có kích thước chiều rộng tối đa ở điện thoại Iphone 4 là 640px.Responsive do áp dụng kỹ thuật thiết kế được xử lý từ client-side chứ không hề thông qua truy vấn đến máy chủ để xử lý (server - side) nên nó có một yếu điểm là làm trình duyệt của bạn phải tốn 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 website?
Để cho website của bạn hiển thị được ở chế độ Responsive, chúng ta có hai bước như sau:

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

Trước tiên bạn cần đặt thẻ này vào trong phần <head> trên trong mã HTML của website 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 một hiển thị cho trình duyệt tương ứng với kích thước màn hình. Chẳng hạn như ví dụ trên, bạn có thể định dạng co trình duyệt hiển thị cố định và tương thích 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 cho phép người dùng phóng to,hay thu nhỏ, theo bề ngang của màn hình (thiết lập initial-scale với giá trị cố định tương ứng 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: Định dạng cho chiều rộng của viewport.

• Device-width: Chiều rộng cố định của mọi thiết bị khác nhau.

• Height: Để thiết lập chiều cao cho viewport.

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

• Initial-scale: Định dạng mức phóng to của trình duyệt lúc ban đầu, với giá trị là 1 có nghĩa là không thể phóng to, khi giá trị được thiết lập, định dạng thì người dùng không cách nào 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 mọi trình duyệt.

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

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

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

Ngay tại bước này, chúng ta sẽ triển khai viết CSS tương ứng cho từng mức hiển thị 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 trên chiều rộng và được tính theo giá trị tuyệt đối trên đơn vị là pixel(px). Nhiều người có thể tính dựa trên đơn vị tương đối đo là em, rem, DPI, phần trăm(%),…nhưng nếu bạn là người mới thì nên dùng pixel (px) cho dễ nhé.



Để viết đoạn CSS tương ứng cho chiều rộng của trình duyệt chúng ta sử dụng cú pháp @media trong CSS3 (@media query) giúp ta có thể phân chia các đoạn CSS theo từng kích thước màn hình. Kích thước các bạn đ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 đây là một số kiến thức để bạn có thể viết được giao diện CSS Responsive

Ngoài đơn vị pixel ra, thì các đơn vị đo chiều dài trong website 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 cần nên sử dụng max-width thay vì width để tránh cố định chiều rộng của website.


Sử dụng thuộc tính display: none cho từng thành phần cần ẩn đi ở từng thiết bị màchúng ta muốn ẩn. Và display: block ở các thiết bị mà 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 đè code CSS. Căn bản chỉ có vậy thôi, thực ra Responsive thì chỉ khó nhất là phần thiết kế menu nhưng khi thực hành nhiều bạn sẽ nắm rõ một cách dễ dàng hơn.

Trên đây là một số chia sẻ nhỏ để các bạn có thể hiểu rõ về thiết kế giao diện website áp dụng kỹ thuật Responsive. Nếu các bạn có thắc mắc gì xin liên hệ với mình.



Biểu tượng cảm xúc ( Copy và dán xuống phần Comment )
Hãy Comment Những Gì Bạn Chưa Hiểu Hay Đơn Giản Là Để góp phần Tạo Động Lực Cho Tác Giả
• Không SPAM bạn nhé!
EmoticonEmoticon