Xin chào. Đã khá lâu kể từ khi tôi viết một cái gì đó trên Medium. Trong bài viết này, tôi muốn nói về việc phóng to trang web, hay cụ thể hơn là phóng to trang web trên trình duyệt. Người dùng thường phóng to để xem văn bản hoặc hình ảnh rõ ràng hơn trên trang web. Đơn giản như phóng to hình thức, nó có thể không đơn giản như phóng to nội dung. Bài viết này dành cho bạn đã quen thuộc với phát triển web và muốn biết…
Tùy chọn thu phóng không phải lúc nào cũng hữu ích. Một trong những bất tiện phổ biến nhất mà cả nhà phát triển và người dùng gặp phải là việc phóng to ứng dụng di động, đặc biệt khi bạn đang phát triển trò chơi. Tuy nhiên, việc vô hiệu hóa tùy chọn thu phóng đang trở thành một lỗi phổ biến trong nhiều trường hợp và chúng tôi không khuyến nghị điều này cho hầu hết các trang web vì thu phóng có thể giúp nhiều người dùng truy cập. Hãy tưởng tượng ai đó bị khuyết tật liên quan đến thị giác đang cố đọc văn bản trên trang web của bạn. Nhân tiện, nếu bạn chắc chắn về những gì mình đang làm và bạn vẫn muốn tùy chọn thu phóng bị chặn, ở đây chúng tôi bao gồm một số cách để làm như vậy
Để tắt tùy chọn thu phóng, bạn có thể sử dụng trình duyệt Surefox, tuy nhiên, trang sẽ phóng to và thu nhỏ bằng cách nhấn đúp vào màn hình, vì vậy tốt hơn bạn nên thử các phương pháp được đề xuất bởi HTML và CSS
Cách phổ biến nhất để vô hiệu hóa thu phóng là sử dụng thẻ HTML. Thuộc tính user-scalable cho phép thiết bị phóng to và thu nhỏ. Bạn nên xác định giá trị "không" cho thuộc tính này để tắt tùy chọn thu phóng. Nó phải trông như thế này
Tuy nhiên, bạn nên cân nhắc rằng khi muốn vô hiệu hóa khả năng mở rộng của người dùng cho một trang web, trước tiên, bạn cần đảm bảo rằng trang đó vừa với thiết bị xem nó. Vì vậy, việc sử dụng thuộc tính này cùng với các thuộc tính tỷ lệ ban đầu và tỷ lệ tối đa là rất phổ biến. Bây giờ hãy thử một ví dụ để làm cho nó rõ ràng hơn
Disable the Zoom
Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Disable the Zoom
Houses
Note: Not zoomable on mobile
Vì nhiều nhà phát triển đã lạm dụng giải pháp này nên hầu hết các trình duyệt trên máy tính để bàn đều bỏ qua thuộc tính user-scalable=no. Thuộc tính này vẫn có thể sử dụng được trên hầu hết các trình duyệt điện thoại Android nhưng nó bị bỏ qua trên iOS Safari và kết quả là nó không phải là một giải pháp tốt cho các thiết bị iOS. Đọc phần tiếp theo để biết giải pháp CSS hoạt động trên iOS Safari
Không sử dụng đáp ứng
gắn thẻ nếu trang web của bạn không được thiết kế đặc biệt để đáp ứng và hoạt động tốt ở kích thước đó, nếu không, nó sẽ khiến trải nghiệm trở nên tồi tệ hơnChúng ta đã thấy một giải pháp HTML để tắt hoàn toàn tính năng phóng to trên các trang web trong phần trước. Chúng tôi cũng đã đề cập đến nhược điểm và bây giờ bạn biết rằng tùy chọn HTML không hoạt động cho iOS Safari. Tuy nhiên, hầu hết thời gian, chúng tôi không thực sự muốn tắt tính năng thu phóng hoàn toàn, chúng tôi chỉ muốn tắt một số tùy chọn thu phóng nhất định làm hỏng trải nghiệm người dùng. Một trong những tình huống phổ biến nhất là phóng to tự động của các yếu tố
Để ngăn tự động phóng to các phần tử đầu vào, chỉ cần đặt thuộc tính kích thước phông chữ CSS thành 16px trở lên là đủ
Khả năng truy cập trang web luôn quan trọng, nhưng ngày nay, khi chúng ta có các tiêu chuẩn và quy định rõ ràng từ chính phủ ở hầu hết các quốc gia, việc hỗ trợ các tiêu chuẩn đó và làm cho các dự án của chúng ta dễ truy cập nhất có thể càng trở nên quan trọng hơn.
Khuyến nghị của W3C cung cấp 3 cấp độ tuân thủ.
Disable the Zoom
Houses
Note: Not zoomable on mobile
8,
Disable the Zoom
Houses
Note: Not zoomable on mobile
9 và @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
0. Để ở cấp độ
Disable the Zoom
Houses
Note: Not zoomable on mobile
9, trong số các yêu cầu khác, chúng tôi phải cung cấp cách tăng kích thước phông chữ của trang web1. 4. 4 Thay đổi kích thước văn bản. Ngoại trừ chú thích và hình ảnh của văn bản, văn bản có thể được thay đổi kích thước mà không cần công nghệ hỗ trợ lên đến 200 phần trăm mà không làm mất nội dung hoặc chức năng. [Cấp AA]
Hãy xem xét các giải pháp cho vấn đề này và cố gắng tìm ra giải pháp tốt nhất có thể
Cập nhật[25/09/17]. Hóa ra WCAG không yêu cầu giải pháp tùy chỉnh thay đổi kích thước văn bản ngoài những gì tác nhân người dùng cung cấp. Chúng tôi chỉ cần đảm bảo rằng một trang web trông ổn do thay đổi kích thước. Tuy nhiên, nếu chúng ta vẫn muốn mở rộng quy mô các yếu tố vì bất kỳ lý do gì, dưới đây là phân tích kỹ lưỡng về các phương pháp khác nhau để thực hiện điều đó
Giải pháp chưa hoàn chỉnh. CSS @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
2
@media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
Từ đầu tiên xuất hiện khi chúng ta nói về thay đổi kích thước là thu phóng. CSS có thuộc tính
@media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
2 và nó thực hiện chính xác những gì chúng tôi muốn — tăng kích thướcHãy cùng xem một mẫu thiết kế phổ biến [mà chúng ta sẽ sử dụng cho phần còn lại của bài viết này]. một thanh điều hướng ngang biến thành biểu tượng menu tại một điểm dừng nhất định
GIF bên dưới cho thấy những gì chúng tôi nhận được với cách tiếp cận
@media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
2 được áp dụng cho thành phần menu. Tôi đã tạo một trình chuyển đổi cho phép chọn các kích thước khác nhau và áp dụng mức thu phóng phù hợpMenu nằm ngoài khu vực hiển thị vì chúng tôi không thể lập trình tăng chiều rộng khung nhìn bằng thu phóng cũng như chúng tôi không thể bọc menu do yêu cầu. Biểu tượng menu cũng không xuất hiện do kích thước màn hình thực tế không thay đổi, nó giống như trước khi chúng tôi nhấp vào trình chuyển đổi
Tất cả những vấn đề này, cộng thêm, dù sao thì
@media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
2 cũng không được Firefox hỗ trợGiải pháp sai. Chuyển đổi quy mô
Chúng tôi có thể nhận được phần lớn hiệu ứng tương tự với
@media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
0 như chúng tôi đã nhận được với @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
2. Ngoại trừ, @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
2 được các trình duyệt hỗ trợ rộng rãi hơn. Tuy nhiên, chúng tôi gặp chính xác những vấn đề giống như chúng tôi gặp phải với @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
2. menu không vừa với vùng hiển thị và tệ hơn, nó còn vượt ra ngoài vùng hiển thị dọc vì bố cục trang được tính toán dựa trên tỷ lệ 1 yếu tố ban đầuXem Pen Font-switcher–sai-scale của Mikhail Romanov [@romanovma] trên CodePen
Một giải pháp không đầy đủ khác. @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
4 và @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
5 @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
6
@media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
@media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
@media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
Thay vì phóng to hoặc thu nhỏ, chúng tôi có thể sử dụng
@media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
4 làm đơn vị kích thước cho tất cả các thành phần trên trang. Sau đó, chúng ta có thể thay đổi kích thước của chúng bằng cách thay đổi thuộc tính @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
6 của phần tử @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
5, bởi vì theo định nghĩa của nó,
Disable the Zoom
Houses
Note: Not zoomable on mobile
80 bằng với giá trị @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
6 của @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
5Đây là một giải pháp khá tốt, nhưng không hoàn hảo. Như bạn có thể thấy trong bản trình diễn sau, nó có các vấn đề tương tự như các ví dụ trước. tại một thời điểm, nó không vừa theo chiều ngang vì không gian cần thiết được tăng lên nhưng chiều rộng của khung nhìn vẫn giữ nguyên
Xem Pen Font-switcher–wrong-rem của Mikhail Romanov [@romanovma] trên CodePen
Theo một nghĩa nào đó, vấn đề là các truy vấn phương tiện không điều chỉnh theo sự thay đổi về kích thước. Khi chúng tôi tăng kích thước, các truy vấn phương tiện sẽ điều chỉnh tương ứng để hiệu ứng ở cùng một vị trí sẽ xảy ra trước khi thay đổi kích thước, liên quan đến nội dung
giải pháp làm việc. Giả lập thu phóng trình duyệt với Sass
Disable the Zoom
Houses
Note: Not zoomable on mobile
83
Disable the Zoom
Houses
Note: Not zoomable on mobile
Để tìm nguồn cảm hứng, hãy xem cách tính năng thu phóng của trình duyệt gốc xử lý sự cố
Ồ. Chrome hiểu rằng tính năng thu phóng thực sự làm thay đổi chế độ xem. Thu phóng càng lớn, khung nhìn càng hẹp. Có nghĩa là các truy vấn phương tiện của chúng tôi sẽ thực sự có hiệu lực như chúng tôi mong đợi và cần chúng
Một cách để đạt được điều này [không cần dựa vào thu phóng gốc, vì không có cách nào để chúng tôi truy cập vào điều khiển trên trang của chúng tôi theo yêu cầu của AA] là bằng cách nào đó cập nhật các giá trị truy vấn phương tiện mỗi khi chúng tôi thay đổi kích thước phông chữ
Ví dụ: giả sử chúng tôi có điểm dừng truy vấn phương tiện tại
Disable the Zoom
Houses
Note: Not zoomable on mobile
84 và chúng tôi thực hiện thu phóng
Disable the Zoom
Houses
Note: Not zoomable on mobile
85. Chúng ta nên cập nhật điểm dừng đó thành
Disable the Zoom
Houses
Note: Not zoomable on mobile
86 để bù cho kích thước mớiĐiều này không nên dễ dàng sao? . Hãy thử cập nhật truy vấn phương tiện từ
Disable the Zoom
Houses
Note: Not zoomable on mobile
89 đến @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
4 trong Bút này và thấy rằng không có gì thay đổi. Bố cục không chuyển đổi điểm dừng sau khi tăng kích thước. Đó là bởi vì, theo tiêu chuẩn, cả hai đơn vị @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
4 và
Disable the Zoom
Houses
Note: Not zoomable on mobile
92 trong truy vấn phương tiện đều được tính toán dựa trên giá trị ban đầu của phần tử @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
5 @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
6 thường là
Disable the Zoom
Houses
Note: Not zoomable on mobile
95 [và có thể thay đổi]Các đơn vị tương đối trong truy vấn phương tiện dựa trên giá trị ban đầu, có nghĩa là các đơn vị không bao giờ dựa trên kết quả khai báo. Ví dụ: trong HTML, đơn vị
92 có liên quan đến giá trị ban đầu của 'Disable the Zoom
Houses
Note: Not zoomable on mobile
6@media [min-width: 640px] { html.font-size--s .menu__mobile { display: none; } } @media [min-width: 960px] { html.font-size--m .menu__mobile { display: none; } } @media [min-width: 1280px] { html.font-size--l .menu__mobile { display: none; } } @media [min-width: 2560px] { html.font-size--xl .menu__mobile { display: none; } }
Tuy nhiên, chúng ta có thể sử dụng sức mạnh của Sass
Disable the Zoom
Houses
Note: Not zoomable on mobile
83s để giải quyết vấn đề này. Đây là cách chúng tôi sẽ làm điều đó- chúng tôi sẽ sử dụng một lớp đặc biệt trên phần tử
5 cho mỗi kích thước [@media [min-width: 640px] { html.font-size--s .menu__mobile { display: none; } } @media [min-width: 960px] { html.font-size--m .menu__mobile { display: none; } } @media [min-width: 1280px] { html.font-size--l .menu__mobile { display: none; } } @media [min-width: 2560px] { html.font-size--xl .menu__mobile { display: none; } }
00,@media [min-width: 640px] { html.font-size--s .menu__mobile { display: none; } } @media [min-width: 960px] { html.font-size--m .menu__mobile { display: none; } } @media [min-width: 1280px] { html.font-size--l .menu__mobile { display: none; } } @media [min-width: 2560px] { html.font-size--xl .menu__mobile { display: none; } }
6@media [min-width: 640px] { html.font-size--s .menu__mobile { display: none; } } @media [min-width: 960px] { html.font-size--m .menu__mobile { display: none; } } @media [min-width: 1280px] { html.font-size--l .menu__mobile { display: none; } } @media [min-width: 2560px] { html.font-size--xl .menu__mobile { display: none; } }
02@media [min-width: 640px] { html.font-size--s .menu__mobile { display: none; } } @media [min-width: 960px] { html.font-size--m .menu__mobile { display: none; } } @media [min-width: 1280px] { html.font-size--l .menu__mobile { display: none; } } @media [min-width: 2560px] { html.font-size--xl .menu__mobile { display: none; } }
03,@media [min-width: 640px] { html.font-size--s .menu__mobile { display: none; } } @media [min-width: 960px] { html.font-size--m .menu__mobile { display: none; } } @media [min-width: 1280px] { html.font-size--l .menu__mobile { display: none; } } @media [min-width: 2560px] { html.font-size--xl .menu__mobile { display: none; } }
04,@media [min-width: 640px] { html.font-size--s .menu__mobile { display: none; } } @media [min-width: 960px] { html.font-size--m .menu__mobile { display: none; } } @media [min-width: 1280px] { html.font-size--l .menu__mobile { display: none; } } @media [min-width: 2560px] { html.font-size--xl .menu__mobile { display: none; } }
6@media [min-width: 640px] { html.font-size--s .menu__mobile { display: none; } } @media [min-width: 960px] { html.font-size--m .menu__mobile { display: none; } } @media [min-width: 1280px] { html.font-size--l .menu__mobile { display: none; } } @media [min-width: 2560px] { html.font-size--xl .menu__mobile { display: none; } }
02@media [min-width: 640px] { html.font-size--s .menu__mobile { display: none; } } @media [min-width: 960px] { html.font-size--m .menu__mobile { display: none; } } @media [min-width: 1280px] { html.font-size--l .menu__mobile { display: none; } } @media [min-width: 2560px] { html.font-size--xl .menu__mobile { display: none; } }
07, v.v. ]@media [min-width: 640px] { html.font-size--s .menu__mobile { display: none; } } @media [min-width: 960px] { html.font-size--m .menu__mobile { display: none; } } @media [min-width: 1280px] { html.font-size--l .menu__mobile { display: none; } } @media [min-width: 2560px] { html.font-size--xl .menu__mobile { display: none; } }
- chúng tôi sẽ sử dụng một
83 đặc biệt, quy tắc này tạo quy tắc truy vấn phương tiện cho mọi kết hợp điểm ngắt và kích thước, đồng thời tính đến cả chiều rộng màn hình và lớp công cụ sửa đổi được áp dụng cho phần tửDisable the Zoom
Houses
Note: Not zoomable on mobile
5@media [min-width: 640px] { html.font-size--s .menu__mobile { display: none; } } @media [min-width: 960px] { html.font-size--m .menu__mobile { display: none; } } @media [min-width: 1280px] { html.font-size--l .menu__mobile { display: none; } } @media [min-width: 2560px] { html.font-size--xl .menu__mobile { display: none; } }
- chúng tôi sẽ bọc mã bằng
83 này ở mọi nơi chúng tôi muốn áp dụng truy vấn phương tiệnDisable the Zoom
Houses
Note: Not zoomable on mobile
Đây là giao diện của
Disable the Zoom
Houses
Note: Not zoomable on mobile
83 này
Disable the Zoom
Houses
Note: Not zoomable on mobile
4Và một ví dụ về CSS mà nó tạo ra
@media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
Vì vậy, nếu chúng tôi có n điểm dừng và m kích thước, chúng tôi sẽ tạo quy tắc truy vấn phương tiện n lần m và điều đó sẽ bao gồm tất cả các trường hợp có thể xảy ra và sẽ cung cấp cho chúng tôi khả năng mong muốn để sử dụng các truy vấn phương tiện tăng lên khi kích thước phông chữ tăng lên
Kiểm tra Bút dưới đây để xem nó hoạt động như thế nào
Xem Pen Font-switcher–right của Mikhail Romanov [@romanovma] trên CodePen
nhược điểm
Có một số nhược điểm mặc dù. Hãy xem làm thế nào chúng ta có thể xử lý chúng
Tăng tính đặc hiệu trên bộ chọn truy vấn phương tiện
Tất cả mã bên trong truy vấn phương tiện đều có thêm mức độ cụ thể vì nó nằm bên trong bộ chọn
Disable the Zoom
Houses
Note: Not zoomable on mobile
92. Vì vậy, nếu chúng ta sử dụng cách tiếp cận và sử dụng thiết bị di động đầu tiên, ví dụ: công cụ sửa đổi
Disable the Zoom
Houses
Note: Not zoomable on mobile
93 trên một phần tử thì kiểu thông thường của máy tính để bàn có thể giành được công cụ sửa đổi và lề của máy tính để bàn sẽ được áp dụngĐể tránh điều này, chúng ta có thể tạo cùng một
Disable the Zoom
Houses
Note: Not zoomable on mobile
83 cho thiết bị di động và bao bọc bằng mã CSS không chỉ dành cho máy tính để bàn mà còn cho thiết bị di động với
Disable the Zoom
Houses
Note: Not zoomable on mobile
95. Điều đó sẽ cân bằng tính đặc hiệuCác cách khác là xử lý mọi trường hợp đặc biệt bằng một cách tiếp cận riêng lẻ bằng cách tăng tính đặc hiệu một cách giả tạo hoặc tạo
Disable the Zoom
Houses
Note: Not zoomable on mobile
83 với chức năng mong muốn [không có lề trong ví dụ của chúng tôi] và đưa nó không chỉ dành cho thiết bị di động mà còn vào mọi mã điểm ngắtTăng số lượng CSS được tạo
Số lượng CSS được tạo sẽ nhiều hơn vì chúng tôi tạo cùng một mã CSS cho mọi kích thước
Đây không phải là vấn đề nếu các tệp được nén bằng gzip [và đó thường là trường hợp] vì nó xử lý mã lặp lại rất tốt
Một số khung giao diện người dùng như Zurb Foundation sử dụng các điểm dừng tích hợp trong các tiện ích JavaScript và truy vấn phương tiện CSS
Đó là một trong những khó khăn. Cá nhân tôi cố gắng tránh các tính năng của khung phụ thuộc vào chiều rộng màn hình. Cái chính thường bị bỏ qua là hệ thống lưới, nhưng với sự gia tăng của flexbox và lưới, tôi không thấy nó còn là một vấn đề nữa. Hãy xem bài viết tuyệt vời này để biết thêm chi tiết về cách xây dựng hệ thống lưới của riêng bạn
Nhưng nếu một dự án phụ thuộc vào một khung như thế này hoặc chúng tôi không muốn đấu tranh với vấn đề về tính đặc hiệu nhưng vẫn muốn sử dụng AA, thì tôi sẽ xem xét loại bỏ các yếu tố chiều cao cố định và sử dụng
Disable the Zoom
Houses
Note: Not zoomable on mobile
97 cùng với việc thay đổi yếu tố @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
5 @media [min-width: 640px] {
html.font-size--s .menu__mobile {
display: none;
}
}
@media [min-width: 960px] {
html.font-size--m .menu__mobile {
display: none;
}
}
@media [min-width: 1280px] {
html.font-size--l .menu__mobile {
display: none;
}
}
@media [min-width: 2560px] {
html.font-size--xl .menu__mobile {
display: none;
}
}
6 Cảm ơn bạn đã đọc. Vui lòng cho tôi biết nếu điều này hữu ích và những vấn đề khác mà bạn gặp phải khi tuân thủ 1. 4. 4 thay đổi kích thước văn bản W3C Yêu cầu về khả năng truy cập