Bootstrap đáp ứng là gì?

Và tiêu chí đầu tiên để bạn có thể bắt đầu đi thực tập / đi lập trình web, lập trình giao diện người dùng cũng là bạn phải thuần thục cách Web đáp ứng

Cách đây không lâu, thuật ngữ "Responsive Web Design" không tồn tại. Nhưng ngày nay, hầu hết mọi người đều coi đó là tiêu chuẩn chung

Cũng theo Statcounter, tính đến tháng 12 năm 2021, có 75,73% lượng truy cập internet từ thiết bị di động. Vào tháng 9 năm 2021, Google cũng đã thay đổi thuật toán tìm kiếm của mình để ưu tiên các trang web đáp ứng tốt

Thế nên Responsive Web càng phải là công việc được ưu tiên trước tiên và bạn cần thiết phải học nó sớm

Trong bài đăng này, mình sẽ đề cập đến những điều sau

• Thẻ meta viewport và chức năng của nó là gì?

• Các hiệu quả kỹ thuật hiệu quả được sử dụng trong thiết kế web đáp ứng để phù hợp với các thiết bị di động và máy tính bảng

• Các công cụ giúp mô phỏng và theo dõi trải nghiệm người dùng trên thiết bị di động và bảng máy tính

#1. Responsive Web là gì?

Web đáp ứng hay còn gọi là Thiết kế Web đáp ứng là cách tiếp cận tập trung vào môi trường của người dùng trang web

Môi trường của người dùng sẽ phụ thuộc vào thiết bị mà họ đã kết nối với internet

Có nhiều đặc điểm môi trường tác động đến công việc này bao gồm

• Loại tương tác [Màn hình cảm ứng, track pad]

> Ghi chú. Nhiều lập trình viên chỉ tập tin trung vào phần kích thước màn hình. Nhưng vẫn còn những yếu tố khác có tác động không nhỏ đến việc Responsive Web, trải nghiệm của khách hàng

Trước khi web responsive trở nên phổ biến, nhiều công ty có tiền, họ đầu tư làm riêng 1 giao diện cho di động, 1 giao diện cho máy tính để bàn

Nó là 2 mã nguồn được lập trình khác nhau, quản lý khác nhau

Nhưng trong cách web đáp ứng, máy chủ luôn gửi cùng một bộ mã HTML đến tất cả các thiết bị và chỉ sử dụng CSS để thay đổi cách hiển thị của trang trên các thiết bị khác nhau

> Tham khảo KHÓA HỌC LẬP TRÌNH WEB [Full Stack] để có thể tự mình lập trình website từ A đến Z cho khách hàng

Bước đầu tiên khi tạo trang web cho điện thoại hoặc bảng máy tính là đảm bảo trình duyệt đã biết ý định của bạn. Đây là nơi thẻ meta viewport phát huy tác dụng

#2. Thẻ Meta Viewport để xác định một trang web di động

Thẻ meta viewport hướng dẫn trình duyệt cách điều chỉnh trang theo chiều rộng của từng thiết bị

Khi thiếu phần tử meta viewport, trình duyệt trên thiết bị di động sẽ hiển thị các trang web được cài đặt màn hình mặc định. Điều này dẫn đến việc trang web bị thu nhỏ trên màn hình điện thoại và gần như không có phản hồi

Dưới đây là cách phát triển tiêu chuẩn

content="width=device-width,initial-scale=1"

Bây giờ trình duyệt đã biết điều gì đang xảy ra, bạn có thể sử dụng các kỹ thuật phổ biến để làm cho trang web của bạn trở nên Responsive?

#3. CSS Media Queries cho các kích thước và hướng màn hình khác nhau

Nếu bạn chưa quen với cách web đáp ứng, Media Queries là tính năng CSS đầu tiên, quan trọng nhất để tìm hiểu

Media Queries cho phép bạn định dạng các phần tử dựa trên chiều rộng của khung nhìn

Một chiến lược CSS phổ biến là viết các kiểu dành riêng cho thiết bị di động trước [Mobile-first] và sau đó dựa vào đó để xây dựng các kiểu phức tạp hơn cho các thiết bị khác [Máy tính để bàn, máy tính bảng. ]

Truy vấn phương tiện là một phần quan trọng của web đáp ứng, thường được sử dụng để bố trí lưới cục bộ, kích thước phông chữ, lề và phần đệm khác nhau giữa kích thước và hướng màn hình

Dưới đây là ví dụ về trường hợp sử dụng phổ biến của chiến lược Mobile-first, trong đó

• Cột .column có chiều rộng bằng 100% đối với các thiết bị nhỏ hơn

• Nhưng trong các cửa sổ xem lớn hơn là 50%.

@media [chiều rộng tối thiểu. 600px] {

Đoạn mã trên là một ví dụ đơn giản, nhưng tác dụng của nó rất thú vị

• Trước tiên, khi xem xét thiết bị di động, phần tử .column được đặt có chiều rộng là 100%

• Bằng cách sử dụng @media [min-width: 600px], chúng tôi xác định các quy tắc dành riêng cho các cửa sổ xem có chiều rộng tối thiểu là 600px trở lên. Vì thế, đối với các khung nhìn rộng hơn 600px, phần tử .column của chúng ta sẽ có chiều rộng bằng .column0 giá trị gốc của nó

Có nhiều biến kích thước phổ biến mà bạn cần chú ý để có thể tạo ra các cách hiển thị khác nhau trên đó như là