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à

• <576px: Thiết bị cực nhỏ như điện thoại di động ở chế độ dọc.

• Từ 576px đến <768px. Màn hình thiết bị nhỏ như Điện thoại di động ở chế độ ngang

• Từ 768px đến <992px. màn hình thiết bị trung bình như bảng máy tính

• Từ 992px đến <1200px. Thiết bị lớn như máy tính để bàn

• Từ 1200px trở lên. Các thiết bị có màn hình máy tính cực lớn

Tất nhiên, bạn có thể ghép lại chung giống như cách làm đơn giản ở ví dụ trên

> Hoặc SỬ DỤNG BOOTSTRAP (CSS Framework) để dễ dàng tạo lưới đáp ứng

Mặc dù các Truy vấn phương tiện là cần thiết cho thiết kế web đáp ứng

Nhưng nhiều tính năng CSS mới khác cũng đang được áp dụng và hỗ trợ rộng rãi trong các trình duyệt hiện đại

Trong đó, Flexbox là một trong những tính năng của CSS3, nó giúp ích rất nhiều cho mặt thiết kế web responsive

#4. Flexbox là gì?

Cách dễ nhất để căn giữa theo chiều dọc với CSS là gì?

Chính là Flexbox

Làm cách nào để bạn tạo một mạng lưới đáp ứng mạng?

Chính là Flexbox

Module Flexbox Layout cung cấp một cách hiệu quả để bố trí, căn chỉnh và phân bổ không gian giữa các mục (item) trong một thùng chứa (container), ngay cả khi kích thước của chúng là động (do that has from “flex

Trong ví dụ dưới đây, chúng tôi sẽ kết hợp các Truy vấn phương tiện như đã giải thích ở trên để tạo một lưới đáp ứng

biện minh cho nội dung. không gian giữa;

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

Xem kết quả trên trình duyệt ta được như sau

Ví dụ sử dụng Flexbox cho Web đáp ứng (Hình 1) khi kích thước cửa sổ nhỏ hơn 600px

Ví dụ sử dụng Flexbox cho Web đáp ứng (Hình 2) khi kích thước cửa sổ lớn hơn, từ 600px trở lên

Giải thích đoạn mã trên

• Thiết lập flexbox cục bộ với .column1 cho thùng chứa (tức là thẻ .column2 của chúng ta)

• Ta tạo kế cho di động trước (Mobile-first). Đặt phần tử .column2 thành .column4 để cho phép các phần tử được thiết lập trong flexbox cục bộ của chúng tôi hiển thị như hình 1. (Không đủ chỗ thì xuống dòng)

• Chúng ta đặt .column5 trên các phần tử .column6 để đảm bảo chúng có chiều rộng 100% phần tử cha trong flexbox cục bộ (hình 1)

Tiếp theo, chúng ta tạo kiểu cho các thiết bị lớn hơn như máy tính bảng và máy tính để bàn

• Chúng ta sử dụng @media (min-width: 600px) để áp dụng css này cho các màn hình từ 600px trở lên

• Tiếp theo đó, đặt phần tử .column2 chứa của chúng ta thành 100%0 để đảm bảo rằng các phần tử duy trì trên một dòng dù kích thước có mở rộng hơn

• Set div to 100%1 in media query - các cột sẽ có chiều rộng bằng 100%2 chiều rộng của cột .column2

Trong ví dụ này, thứ hay ho sẽ xuất hiện trong các thiết bị lớn hơn so với việc các css trong truy vấn phương tiện kết hợp với flexbox

• Bởi vì chúng ta đã xác định nghĩa .column1 và bởi vì chúng ta không ghi bỏ quy tắc này trong truy vấn phương tiện truy vấn, chúng ta sẽ có khối flexbox cục bộ cho thiết bị di động, máy tính bảng và máy tính để bàn

• Trong truy vấn phương tiện, đặt chiều rộng phần tử thành 100%1 và không cho nó xuống dòng với 100%0  Kết quả với công việc kế thừa các quy tắc 100%7 chúng ta có bố cục flexbox cục bộ như Hình 2

Trước đây, không có flexbox, để có được cột cục bộ như thế này, chúng ta sẽ cần rất nhiều CSS thay vì chỉ thay đổi 3 thuộc tính như trên

> Bạn có thể đọc thêm bài Thiết kế web với Flexbox để khám phá kỹ hơn

Ngoài ra, trong một số trường hợp, bạn không thể muốn trải rộng theo chiều thẳng đứng mà phải có chiều cao định sẵn

Trong vấn đề này, bạn có một kỹ thuật khác để xử lý đó là - cuộn ngang

#5. Kỹ thuật Scroll ngang

Có thể có lúc bạn bị tràn nội dung lớn, bị tràn từ các khung nhìn. hãy sử dụng cuộn tràn

Kỹ thuật này phổ biến biến cho menu và bảng có thể cuộn được. Dưới đây là một ví dụ về menu có thể cuộn ngang

Tại sao nó lại hoạt động như thế?

• 100%8 là thành phần chính của công thức này. Bằng cách chỉ định 100%9, nó sẽ cắt nội dung ở trên và dưới. Giá trị 50%.0 là để thêm thanh cuộn làm tràn trục hoành

• Mặc dù bạn có thể nghĩ rằng 100%9 là đủ, nhưng bạn cũng phải yêu cầu trình duyệt không xuống hàng các phần tử con bằng thuộc tính 50%.2

Bây giờ chúng ta đã có một số kỹ thuật thiết kế bố cục cục bộ Responsive, nhưng vẫn còn các phần tử như ảnh và video khó xử lý đáp ứng

#6. Kỹ thuật Responsive ảnh trong thiết lập web

Bằng cách sử dụng các thuộc tính hiện đại của thẻ 50%.3, chúng ta có thể xử lý hình ảnh trên nhiều loại thiết bị và các mức độ phân chia khác nhau

Dưới đây là một ví dụ về cách Responsive ảnh

Đoạn mã này đang làm rất nhiều thứ như sau

• Bằng cách đặt 50%.4 hình ảnh sẽ tăng hoặc giảm Tỷ lệ dựa trên chiều rộng vùng chứa

• Sử dụng kết hợp thẻ 50%.3, 50%.6 và thẻ 50%.7, chúng tôi thực sự chỉ hiển thị một hình ảnh và chỉ tải hình ảnh phù hợp nhất dựa trên thiết bị của người dùng

• WebP là một định dạng hình ảnh hiện đại cung cấp khả năng nén tốt hơn cho hình ảnh trên web. Sử dụng 50%.6, chúng ta có thể tham khảo hình ảnh WebP để sử dụng cho các trình duyệt hỗ trợ nó và một thẻ 50%.6 khác để tham chiếu phiên bản PNG của hình ảnh không hỗ trợ WebP

• .column0 được sử dụng để cho phép duyệt trình biết hình ảnh sẽ sử dụng dựa trên tốc độ phân tích của thiết bị

• Chúng ta thiết lập bổ sung tính năng Native Load Lazy bằng cách sử dụng cặp thuộc tính / giá trị .column1

#7. Video phản hồi

Responsive Video là một chủ đề khác rất quan trọng bởi hướng nội dung video đang lên ngôi

Một chiến lược quan trọng để thiết lập cấu hình ảnh, video, khung nội tuyến và các yếu tố khác trả lời ứng dụng liên quan đến việc sử dụng Tỷ lệ khung hình

Tỷ lệ khung nhìn không phải là một kỹ thuật mới. Nhưng nó rất hữu ích để giúp bạn chắc tay nghề lập trình web của mình

Please view a ví dụ

Trong ví dụ này, chúng ta có một video YouTube được nhúng dưới dạng .column2 và một vùng chứa .column6 với lớp là .column4

Giải thích đoạn mã này như sau

• .column5 trên phần tử .column6 cho phép các phần tử con sử dụng vị trí .column7 liên quan đến nó

• .column8 kết hợp với .column9 là thành phần quan trọng ở đây để thiết lập hành động, nó thực thi Tỷ lệ hợp lệ với 100%0

• 100%1 và 100%2 và 100%3 được đặt áp dụng cho .column2 tạo ra một hành động xác định vị trí của chính nó một cách tuyệt vời đối với phần tử gốc của nó. mount it on the same side left

• Và chiều rộng cuối cùng và chiều cao là 100% làm cho phần tử con, .column2 là 100% của phần tử cha của nó. Phần tử cha, .column6 có toàn quyền kiểm tra giám sát việc thiết lập các quy định của khung hình cục bộ

Mình biết là. còn rất nhiều thứ

Bạn có thể làm nhiều hơn nữa để video và hình ảnh trông đẹp hơn trên điện thoại và máy tính bảng. Vì thế, mình khuyến khích bạn nghiên cứu về các chủ đề này sâu hơn trên Google

OK, giả sử bây giờ chúng ta đã là bậc thầy về Responsive Web. Vì vậy, làm thế nào chúng ta có thể kiểm tra web có thực sự đáp ứng hay không?

Rất có thể, chúng tôi có một số công cụ để mô phỏng và theo dõi trải nghiệm của người dùng trên nhiều loại thiết bị

#số 8. Các công cụ để mô phỏng và kiểm tra các trang web đáp ứng

Bạn chỉ cần lên Google là tìm được rất nhiều công cụ hữu ích giúp chúng ta kiểm tra trang web với thiết kế web responsive. Dưới đây là một vài cái mà mình thường hay sử dụng

Mô phỏng di động trên Chrome DevTools

Công cụ DevTools của Chrome cung cấp tính năng mô phỏng di động cho nhiều loại bảng máy tính và thiết bị di động. Nó cũng cung cấp tùy chọn 'Responsive' cho phép bạn xác định kích thước cửa sổ xem tùy chỉnh

Công cụ mô phỏng thiết bị di động Chrome DevTools

Giám sát Hiệu suất Trang web với Page Speed ​​Insight

Lighthouse là một công cụ mã nguồn mở cung cấp cách phân tích hiệu suất trang web cụ thể cho một thiết bị

Page Speed ​​Insight sử dụng Lighthouse ở Back end để theo dõi hiệu suất trang web nhằm phân tích phản hồi trang

Bạn có thể thiết lập giám sát viên cho cả máy tính để bàn và thiết bị di động để nhận thông tin nhận được và từ đó tối ưu hóa mã của mình

Tổng kết về cách Responsive Web

Các loại thiết bị di động sẽ tiếp tục phát triển rất nhanh và sẽ có nhiều kỹ thuật Responsive Web mà bạn cần phải học, luyện tập để thành công hơn như sử dụng các loại kích thước em, rem, % hay sử dụng CSS Framework . và đó là cả một quá trình học và thực hành

Mình hy vọng những kỹ thuật trong bài viết này sẽ giúp ích cho quá trình hoàn thiện kỹ năng Responsive Web của bạn

Please try to many you nhé

---

HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI

Học lập trình chất lượng cao (Từ năm 2002). Học thực tế + Tuyển dụng ngay

Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội

SĐT. 02435574074 - 0968051561

E-mail. xin chào@niithanoi. giáo dục. vn

trang chủ. https. //Facebook. com/NIIT. CNTT-TT/

#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python