Responsive Web Design (RWD) là xu hướng thiết kế website tương thích với mọi kích thước và màn hình thiết bị hiển thị. Responsive Web Design đã phát triển rất mạnh mẽ và trở thành xu hướng không thể thiếu khi thiết kế website chuyên nghiệp. Nếu bạn tìm kiếm từ khóa “xu hướng thiết kế website”, chắc chắn website responsive sẽ luôn có mặt trong Top 10 các xu hướng qua các năm.

Hôm nay,  Tất Thành xin được chia sẻ hướng dẫn thiết kế website responsive đúng chuẩn cho website của riêng bạn nhé.


Trước khi chúng ta bước vào việc hướng dẫn thiết kế website responsive thì các bạn cần phải có một số kiến thức cơ bản về lập trình như HTML, CSS để có thể hiểu một cách trọn vẹn và tốt nhất.

Thế nào là responsive?

Responsive là một thuật ngữ dùng để chỉ một website có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt.

Ví dụ dưới đây sẽ giúp bạn hình dung cụ thể hơn: Nếu chúng ta xem một trang web trên 1 màn hình máy tính phổ thông ở Việt nam có chiều rộng cố định là 800px thì chắc chắn nếu xem giao diện trang web này ở trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px sẽ không hiển thị hết được.

Để giải quyết cho tình huống này thì theo kiểu thiết kế website truyền thống, thì người thiết kế website thường gán giá trị chiều rộng từ tuyệt đối (800px) sang kiểu giá trị tương đối là phần trăm (%) thì có thể sẽ hiển thị tương ứng được. Điều này cũng đúng, nhưng giả sử website bạn có 3 cột trên một hàng thì liệu rằng trên trình duyệt di động, mắt thường của con người có thể thấy chi tiết mà không cần phóng to màn hình hay không? Do vậy, chúng ta sẽ muốn giao diện sẽ được hiển thị khác đi một xíu trên trình duyệt nhỏ hơn các trình duyệt thông thường, và Responsive là giải pháp làm việc này nhanh nhất và dễ nhất.

Cách thức hoạt động của responsive cũng khá là đơn giản, chúng ta sẽ viết code CSS cho trình duyệt hiểu và thực thi nó trên các loại trình duyệt có kích thước nhất định. Chẳng hạn bạn có thể 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à 320px (điện thoại). Điều này có nghĩa là Responsive sử dụng kỹ thuật thiết kế để xử lý từ client-side chứ không phải thông qua truy vấn đến máy chủ để xử lý(còn được gọi là sever-side). Do đó Responsive có một nhược điểm là làm trình duyệt của bạn tốn thời gian để chờ đợi việc xử ký CSS.

Hướng dẫn áp dụng Responsive lên giao diện website

Để cho trang website của bạn có thể hiển thị được Responsive thì chúng ta có hai bước

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

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

Bạn cần đặt thẻ này trong cặp <head> trong mã HTML trên website bạn.

Thẻ meta viewport nghĩa là một thẻ được thiết lập để trình duyệt hiển thị tương ứng với kích thước của màn hình. Như câu lệnh ở trên thì bạn có thể định dạng trình duyệt hiển thị cố định và tương thích với mọi thiết bị dựa trên chiều rộng của thiết bị đó (device-width) và không cho phép người dùng phóng tó, thu nhỏ, theo chiều ngang của màn hình (thiết lập initial-scale có giá trị cố định là 1.0)

Ngoài thẻ meta viewport này còn có các giá trị khác dưới đây :

Width : Định dạng chiều rộng của viewport

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

Height :  Thiết lập chiều cao của viewport.

Device-height : Chiều cao cố định của thiết bị.

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

Minimum-scale : Mức phóng to tối thiểu của thiết bị với trình duyệt.

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

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

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

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

Các CSS 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){    
}


Về các giá trị của media type và media features trong @media query, bạn có thể tham khảo thêm tại W3Schools cho đầy đủ hơn nhưng thông thường ta cứ viết CSS cho media type là screen và media features chỉ quanh quẩn min-width, max-width mà thôi.


Chỉ cần bạn có một số kiến thức về lập trình thì bạn có thể dễ dàng thiết kế web responsive. Ngoài đơn vị px thì đơn vị đo chiều dài trong website tốt nhất hiện nay là %. Hay còn được gọi là đơn vị có tính tương đối. Một lưu ý nữa là các bạn nên sử dụng max – width thay vì dùng width để tránh cố định chiều rộng của website. Bạn có thể sử dụng thuộc tính display : none cho các thành phần mà bạn muốn ẩn đi trên từng thiết bị. Ngược lại, sử dụng thuộc tính display : block ở các thiết bị cần được hiển thị ra.

Như vậy là chúng ta đã cùng nhau tìm hiểu các khái niệm cơ bản của Responsive Web Design cũng như cách áp dụng chúng trong các trường hợp cụ thể.

Hy vọng qua bài viết này các bạn có thể cải thiện responsive cho trang web của mình sao cho hợp lý và khoa học nhất.

Cảm ơn các bạn đã theo dõi.

Xem thêm các bài viết cùng chủ đề: