Responsive là gì? Kích thước website responsive thế nào?

Trước đây khi thiết kế website người ta thường chỉ quan tâm tới giao diện máy tính. Còn với các thiết bị như máy tính bảng (Tablet), điện thoại (Mobile) thì không được chú ý.

Kể từ khi thuật toán Google Mobile-Friendly ra đời nhiều website mới được thiết kế Responsive. Hiểu đơn giản là trang web sẽ tự co giãn theo kích thước màn hình của thiết bị. Vậy Web Responsive là gì? Cách tạo Responsive cho website như thế nào? Hãy tìm hiểu qua bài viết hướng dẫn ở dưới đây.

Tìm hiểu về Responsive là gì?

Responsive web design nghĩa là website được thiết kế để tự động có giãn theo kích thước. Một trang web có Responsive sẽ có thể hiển thị tốt trên các loại thiết bị như máy tính, máy tính bảng, Android… Sẽ gồm các kỹ thuật như flexible grid, responsive image và CSS media query.

Responsive là gì?Kích thước website responsive thế nào?

Hiện nay có đến 70% người truy cập internet sử dụng điện thoại để tìm kiếm thông tin. Nếu một website không được thiết kế Responsive thì sẽ bỏ quả lượng lớn khách truy cập.

Những lợi ích Responsive Web Design mang lại

Responsive mang lại nhiều lợi ích tuyệt vời như:

  • Tiết kiệm thời gian và chi phí thiết kế bởi sẽ không cần phải tạo ra nhiều phiên bản web khác nhau
  • Responsive Web Design giúp tăng trải nghiệm người dùng từ đó được công cụ tìm kiếm ưu tiên xếp hạng cao hơn
  • Dễ dàng bảo trì chỉ cần thay đổi mã HTML và CSS mà không cần đụng tới Server

Các vị trí thiết kế Responsive được sử dụng

Trong thiết kế web lập trình viên muốn tạo Responsive cần lưu ý các vị trí sau:

Responsive menu

Website hiển thị trên máy tính sẽ là một thanh Menu dài. Nhưng với di động sẽ phải hiển khác đi vì kích thước màn hình bé chỉ 320px. Để tiện lợi cho người dùng Menu sẽ được thiết kế một button khi click vào sẽ mở ra các phần đã ẩn đi.

Responsive Column

Một giao diện website trên máy tính sẽ được chia thành các phần như Header, Sidebar, Content, Footer. Theo bố cục Full Sceen nhưng khi hiện trên di động sẽ được thu lại thành 1 cột. Có nghĩa là các phần sẽ được sắp xếp theo một cột từ trên xuống dưới.

Responsive font size

Font size cũng cần được chú trọng bởi trên các màn hình nhỏ như Table, Smartphone cần phải thiết kế cho dễ đọc. Kích thước chữ không được quá nhỏ mà cũng không được quá lớn.

Responsive image

Để hình ảnh tự động co giãn theo màn hình thường sẽ sử dụng %. Ví dụ mã viết CSS như sau:

img {width: 100%}

Hình ảnh sẽ được thiết lập kích thước là 100%. Bất kể ở màn hình nào nó cũng sẽ giãn rộng ra 100%.

Hướng dẫn thiết kế web Responsive

Trong thiết kế website để xây dựng giao diện lập trình viên sẽ chú trọng tới mobile-first. Có nghĩa là mẫu giao diện trước tiên phải thiết kế cho điện thoại sau đó mới tới máy tính bảng, rồi tới máy tính.

Các loại kích thước Responsive

Để website có thể co giãn theo màn hình thiết bị chúng ta sẽ tham khảo cách làm responsive website như sau:

Bước 1: Khai báo meta viewport

Tại sao lại phải khai báo meta viewport ?

Viewport là khu vực mà người dùng nhìn thấy nội dung. Trên mỗi thiết bị Viewport lại khác nhau chẳng hạn trên điện thoại sẽ nhỏ hơn so với Desktop.

Meta viewport đóng vai trò khai báo để trình duyệt hiển thị phù hợp với kích thước responsive của màn hình thiết bị. Nó thiết lập hiển thị cho trình duyệt tương ứng với kích thước màn hình.

Chèn đoạn mã này trong cặp thẻ <head>…</head>

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

Trong đó:

  • with là chiều rộng của khung nhìn
  • device-width là chiều rộng cố định của thiết bị
  • height là chiều cao của viewport
  • device-height là chiều cao cố định của thiết bị
  • initial-scale sẽ đặt giá trị là 1 có nghĩa là không phóng to khi xem trên di động, tablet
  • minimum-scale thiết lập mức phóng to tối thiểu
  • maximum-scale là mức phóng to tối đa

Bước 2: Viết CSS tự có giản theo màn hình

Để làm màn hình có giãn lập trình viên sẽ sử dụng @media trong CSS3

Media queries là gì?

Media Queries là một module được thêm vào CSS3. Được sử dụng để đáp ứng nhiều kích thước màn hình Responsive khác nhau. Hiện nay các dòng điện thoại thông minh được ra đời nhiều. Mỗi thiết bị lại có độ lớn khác nhau. Vì vậy nó được thêm vào để giải quyết vấn đề đó. Có 2 giá trị được sử dụng là:

  • Max-width: Là độ rộng lớn nhất của màn hình. Khi kích thước vượt quá max-width CSS sẽ không ảnh hưởng.
  • Min-width: Là độ rộng nhỏ nhất của màn hình. Kích thước nhỏ hơn min-width sẽ không bị ảnh hưởng.

Nhưng trước tiên để làm được bạn cần tham khảo các kích thước website responsive theo màn hình:

– max-width: 320px (điện thoại di động, hiển thị chiều dọc)

– max-width: 480px (điện thoại di động, hiển thị chiều ngang)

– max-width: 600px (máy tính bảng, hiển thị chiều dọc)

– max-width: 800px (máy tính bảng, hiển thị chiều ngang)

– max-width: 768px (máy tính bảng loại to, hiển thị chiều dọc)

– max-width: 1024px (máy tính bảng loại to, hiển thị chiều ngang)

– min-width: 1025px (từ size này trở lên là danh cho desktop thông thường).

responsive

Trong thiết kế Moble First dành cho giao diện mobile luôn được ưu tiên đầu tiên sau đó mới đến các thiết bị lớn hơn. 

Ví dụ

/*Kích thước cho Smart phone nhỏ*/
@media screen and (min-width: 240px){

}
/*Kích thước cho Iphone(480 x 640)*/
@media screen and (min-width: 320px){

}
/*Kích thước cho Tablet nhỏ(480 x 640)*/
@media screen and (min-width: 480px){

}
/*Kích thước cho Ipad dọc(768 x 1024)*/
@media screen and (min-width: 768px){

}
/*Kích thước cho Ipad ngang(1024 x 768)*/
@media screen and (min-width: 1024px){

}

Hoặc áp dụng điểm ngắt của các thiết bị điển hình theo kích thước bên dưới

responsive

Bạn cũng có thể áp dụng bằng cách kết hợp cả min-width và max-width

@media only screen and (min-device-width 320px) and (max-device-width 480px) {

}

@media only screen and (min-device-width 481px) and (max-device-width 768px) {

}
Trong một số trường hợp các giá trị sẽ bị trùng nhau. Chẳng hạn khi bạn viết CSS cho max-width: 768px thì nó cũng sẽ tác động tới các kích thước nhỏ hơn. Vì vậy lúc này cần dùng tới min-width and max-width.

Hiện nay Boostrap được sử dụng nhiều trong xây dựng bố cục trang web. Để tiết kiệm thời gian các lập trình viên thường sử dụng Bootstrap để hiển thị website thông qua Gridview. Bố cục được chia thành 12 cột nó sẽ co giãn theo thiết bị rất tiện lợi. Bạn có thể tham khảo thêm bài viết Bootstrap là gì để hiểu rõ hơn.

Cách kiểm tra website Responsive

Để kiểm tra xem website đã được thiết kế Responsive chưa bạn làm như sau:

Bước 1: Ấn Ctrl + Shift + I trên trình duyệt Google Chrome

Bước 2: Ấn chuột trái vào biểu tượng chiếc điện thoại

responsive

Bước 3: Chọn kích thước của màn hình cần kiểm tra ở thanh trên cùng

Cách kiểm tra Responsive

Kết luận: Qua bài viết này bạn đã hiểu Responsive Web Design là gì chưa? Để trở thành một lập trình viên thiết kế web chuyên nghiệp tất cả mọi người đều phải tìm hiểu về Responsive. Trong bài viết tiếp theo Sông Mã Web sẽ hướng dẫn Responsive bằng Boostrap mời bạn theo dõi.

Web
Tìm qua google maps
 Gọi trực tiếp
 Chat ngay
 Chat trên Zalo