Css truy vấn phương tiện cho tất cả các thiết bị

Mọi trang web được truy cập thông qua các thiết bị có kích thước và độ phân giải màn hình khác nhau. Phần mềm phải hiển thị hoàn hảo trên từng kích thước màn hình. Nội dung hoặc hình ảnh không thể bị bóp méo, cắt bỏ hoặc che khuất

Để cho phép điều này, các nhà phát triển phải sử dụng các điểm dừng CSS. Đây là những điểm được xác định trong mã. Nội dung trang web phản hồi những điểm này và tự điều chỉnh theo kích thước màn hình để hiển thị bố cục chính xác

Vì các điểm dừng CSS cho thiết kế đáp ứng được triển khai với các truy vấn phương tiện, nên đôi khi chúng còn được gọi là các điểm dừng truy vấn phương tiện

Với các điểm dừng CSS tại chỗ, nội dung trang web sẽ tự điều chỉnh theo kích thước màn hình và tự hiển thị theo cách vừa mắt và tạo điều kiện thuận lợi cho việc sử dụng trực quan

cũng đọc. Điểm dừng cho thiết kế web đáp ứng

Ví dụ: khi trang web của The New Yorker được xem trên màn hình máy tính để bàn thông thường, người dùng sẽ thấy toàn bộ menu điều hướng ở đầu trang. Tuy nhiên, nếu nó được xem trên iPhone X, kích thước màn hình nhỏ hơn sẽ khiến thanh điều hướng xuất hiện ở phía trên bên trái màn hình dưới dạng menu hamburger

Chế độ xem trên màn hình

Chế độ xem trên thiết bị di động

Tự mình xem trên Trình kiểm tra thiết kế đáp ứng của BrowserStack

Về cơ bản, các điểm dừng truy vấn phương tiện là các giá trị pixel mà nhà phát triển/nhà thiết kế có thể xác định trong CSS. Khi một trang web phản hồi đạt đến các giá trị pixel đó, một chuyển đổi (chẳng hạn như chuyển đổi chi tiết ở trên) sẽ xảy ra để trang web cung cấp trải nghiệm người dùng tối ưu

Đọc thêm. Cách thực hiện kiểm tra phản hồi cho một trang web được lưu trữ cục bộ

Cách đặt điểm ngắt CSS cho Thiết kế đáp ứng

Có hai cách tiếp cận chính để tuân theo khi đặt điểm dừng CSS cho thiết kế đáp ứng

1. Điểm ngắt CSS dựa trên thiết bị

Với tình trạng phân mảnh thiết bị hiện tại, việc xác định điểm dừng dựa trên thiết bị có thể là một thách thức. Các thiết bị mới được phát hành trên thị trường với tần suất ngày càng tăng và việc theo kịp chúng thường đòi hỏi nỗ lực đáng kể

Khi một thiết bị mới có độ phân giải màn hình mới được phát hành, các nhà phát triển sẽ phải quay lại CSS và thêm một điểm dừng mới. Hãy tưởng tượng làm điều này mỗi khi một thiết bị được bán

Mặc dù vậy, để bao quát tất cả các cơ sở, ít nhất người ta có thể đặt điểm dừng dựa trên các thiết bị phổ biến nhất được sử dụng để truy cập trang web. Sử dụng Google Analytics cho mục đích này. Chỉ cần làm theo đường dẫn bên dưới

Đối tượng > Công nghệ > Trình duyệt & Hệ điều hành > Độ phân giải màn hình

• Đặt điểm ngắt cho 10 độ phân giải màn hình thiết bị mà trang web được truy cập từ đó

Ngoài ra, hãy sử dụng phương pháp thiết kế ưu tiên thiết bị di động khi làm việc trên bố cục trang web. Thiết kế trang web cho thiết bị di động trước, vì khoảng

Đọc thêm. Thiết kế di động đầu tiên. Nó là gì và làm thế nào để thực hiện nó

Người ta cũng có thể đặt điểm dừng cho các nhóm thiết bị chung thay vì các thiết bị cụ thể

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Nguồn

2. Điểm ngắt CSS dựa trên nội dung

Đây là một cách tiếp cận dễ dàng hơn bao gồm nhiều mặt đất hơn. Trong trường hợp này, các điểm ngắt được đặt dựa trên nội dung trang web. Tại mọi thời điểm mà nội dung cần thay đổi bố cục, một điểm dừng sẽ được thêm vào. Điều này làm cho các truy vấn phương tiện dễ dàng mã hóa và quản lý hơn

Một nguyên tắc tốt để tuân theo về vấn đề này là thêm một điểm ngắt khi nội dung có vẻ không được sắp xếp hợp lý.

Trực quan hóa một đoạn văn bản. Khi màn hình rộng hơn, nó bắt đầu bị biến dạng, do đó cản trở khả năng đọc. Thêm một điểm dừng ở đây sẽ ngăn điều này xảy ra. Mục đích của việc thêm bất kỳ điểm dừng nào là làm cho nội dung dễ đọc. Điều này áp dụng cho cả tăng và giảm chiều rộng màn hình. Bất cứ khi nào nội dung trở nên khó đọc hơn do thay đổi kích thước màn hình, hãy thêm điểm ngắt

Hãy xem xét một số ví dụ

CSS khởi động khi chiều rộng thiết bị từ 768px trở lên

@media only screen (min-width: 768px){
...
}

CSS khởi động trong giới hạn. 768px đến 959px

@media only screen and (min-width: 768px) and (max-width: 959px){
...
}

Đọc thêm. Kỹ thuật CSS để cải thiện khả năng tương thích giữa các trình duyệt

Sử dụng chiều rộng tối thiểu và chiều rộng tối đa cho các điểm dừng CSS

Dễ dàng thiết lập các điểm dừng với các thuộc tính chiều rộng tối thiểu và chiều rộng tối đa

Sử dụng max-width giúp cải thiện khả năng xử lý của trình duyệt trong trường hợp kích thước màn hình nhỏ. Đặt chiều rộng phản hồi CSS là rất quan trọng để truy cập thiết bị trên màn hình nhỏ hơn

div.ex1 {

width: 300px;

margin: auto;

border: 2px solid #00FFFF;

}
div.ex2 {

max-width: 300px;

margin: auto;

border: 2px solid #00FFFF;

}

Ở đây trong div đầu tiên, hộp (chiều rộng) sẽ không thay đổi kích thước để vừa với màn hình, trong khi hộp thứ hai (chiều rộng tối đa) sẽ thay đổi kích thước

Một vài thực hành tốt nhất là

• Khi thiết kế với phương pháp ưu tiên thiết bị di động (đã đề cập ở trên), hãy bắt đầu với việc đặt các điểm dừng có độ rộng tối thiểu. Các kiểu mặc định phải dành cho màn hình thiết bị nhỏ hơn. Sau đó, thêm và điều chỉnh cho màn hình lớn hơn
• Ngược lại, khi thiết kế cho các thiết bị lớn hơn, hãy đặt CSS mặc định cho chúng và căn chỉnh lại cho các màn hình nhỏ hơn bằng thuộc tính chiều rộng tối đa

Bối rối? . Thử ngay bây giờ

Các điểm dừng truy vấn phương tiện sẽ được sử dụng

Rõ ràng, việc phát triển trang web sẽ dễ dàng hơn khi biết nên sử dụng điểm ngắt phương tiện CSS nào. Các phương pháp được nêu ở trên yêu cầu một số nghiên cứu (liên quan đến các thiết bị phổ biến và bản chất của nội dung), nhưng có một số điểm dừng phương tiện CSS có khả năng phù hợp với hầu hết các trang web

Để bắt đầu, hãy nghiên cứu các framework phổ biến như Bootstrap, Foundation và Bulma

• Bootstrap. 576px, 768px, 992px và 1200px
• Sự thành lập. 40em và 64em
• Bulma. 768px, 769px, 1024px, 1216px và 1408px

Các khung này hỗ trợ thiết kế ưu tiên thiết bị di động, đây là phương pháp hay nhất trong ngành tại thời điểm này. Do đó, việc sử dụng các điểm dừng này sẽ mang lại mức độ phản hồi trang web hiệu quả hơn

Thứ hai, sử dụng điểm ngắt cho độ phân giải thiết bị được sử dụng phổ biến nhất trên thiết bị di động, máy tính để bàn và máy tính bảng. Đây sẽ là

• 1920×1080 (8. 89%)
• 1366×768 (8. 44%)
• 360×640 (7. 28%)
• 414×896 (4. 58%)
• 1536×864 (3. 88%)
• 375×667 (3. 75%)

cũng đọc. Kích thước màn hình lý tưởng cho thiết kế đáp ứng là gì?

Rõ ràng, việc xác định và sử dụng các điểm dừng CSS cho thiết kế đáp ứng và truy vấn phương tiện cho tất cả các thiết bị là không thể thực hiện được bằng con người. Tùy chọn tốt nhất là triển khai các điểm dừng và truy vấn phương tiện CSS phù hợp với tùy chọn thiết bị của đối tượng mục tiêu. Ngoài ra, việc giữ cho nội dung có thể điều chỉnh và thích ứng với thay đổi cũng sẽ giúp đạt được nhiều thành tựu hơn trong dài hạn với mức độ nỗ lực hợp lý

Khi một trang web đã được thiết kế và tích hợp các điểm dừng, hãy nhớ kiểm tra chúng trên các thiết bị thực để kiểm tra khả năng phản hồi của chúng. Tùy thuộc vào số lượng kích thước màn hình được đề cập, việc kiểm tra thiết kế đáp ứng dễ dàng nhất khi sử dụng đám mây thiết bị thực

BrowserStack cung cấp hơn 3000 trình duyệt và thiết bị thực để kiểm tra trình duyệt chéo theo yêu cầu, ngay lập tức trên đám mây. Chỉ cần đăng ký miễn phí, chọn trong số các thiết bị mới nhất, điều hướng đến trang web có liên quan và bắt đầu xác minh thiết kế đáp ứng của nó

Dùng thử Kiểm tra trình duyệt chéo miễn phí

Kiểm tra thủ công Khả năng đáp ứng

Bài đăng này có hữu ích không?

Vâng, cảm ơn Không thực sự

Chúng tôi rất tiếc khi biết điều đó. Hãy chia sẻ phản hồi của bạn để chúng tôi có thể làm tốt hơn

Cảm ơn rất nhiều phản hồi của bạn

thẻ

Những bài viết liên quan

Các kỹ thuật CSS để cải thiện khả năng tương thích giữa các trình duyệt

Ba kỹ thuật CSS giúp trang web trông nhất quán về mặt phong cách trên các trình duyệt

Tìm hiểu thêm

Cách tạo mã CSS cụ thể cho trình duyệt

Tìm hiểu cách tạo mã CSS dành riêng cho trình duyệt để đảm bảo khả năng tương thích giữa các trình duyệt cho một trang web. t

Tìm hiểu thêm

Lưới CSS so với Bootstrap. Cái nào tốt hơn cho bạn?

Bạn nên sử dụng CSS Grid hay Bootstrap để tạo giao diện người dùng hoàn hảo cho trang web của mình?

Tôi có thể có nhiều truy vấn phương tiện trong CSS không?

Bạn có thể sử dụng bao nhiêu truy vấn phương tiện tùy thích trong một tệp CSS . Lưu ý rằng bạn có thể sử dụng toán tử and để yêu cầu nhiều truy vấn phải đúng, nhưng bạn phải sử dụng dấu phẩy (,) làm toán tử hoặc để phân tách các nhóm gồm nhiều truy vấn.

@media all trong CSS là gì?

Có thể sử dụng quy tắc @media CSS để áp dụng một phần của biểu định kiểu dựa trên kết quả của một hoặc nhiều truy vấn phương tiện . Với nó, bạn chỉ định một truy vấn phương tiện và một khối CSS để áp dụng cho tài liệu khi và chỉ khi truy vấn phương tiện khớp với thiết bị có nội dung đang được sử dụng.

Các truy vấn phương tiện tốt nhất trong CSS là gì?

Chọn Điểm ngắt CSS phù hợp .

chiều rộng tối thiểu. 320px (góc nhìn trên điện thoại nhỏ hơn)

chiều rộng tối thiểu. 480px (thiết bị nhỏ và hầu hết điện thoại)

chiều rộng tối thiểu. 768px (hầu hết máy tính bảng)

chiều rộng tối thiểu. 992px (các góc nhìn trên màn hình nhỏ hơn)

chiều rộng tối thiểu. 1200px (thiết bị lớn và màn hình rộng)

Chúng tôi có thể sử dụng truy vấn phương tiện trong CSS nội bộ không?

Giải pháp với kiểu nội bộ . cặp giá trị It is not possible to use CSS @media rules and media queries in the inline style attribute as it can only contain property: value pairs . Theo đặc tả W3, giá trị của thuộc tính style phải khớp với cú pháp nội dung của khối khai báo CSS.