Trang thu phóng Html

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ơn

Chú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 web

1. 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

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ước

Hã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

Đây là những gì chúng tôi muốn xảy ra. Không gói và toàn bộ menu biến thành biểu tượng menu tại một điểm ngắt được chỉ đị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ợp

Kiểm tra Bút ở đây nếu bạn muốn chơi với nó

Menu 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 đầu

Xem 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

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

Để 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ị

  
     Disable the Zoom
    
    
  
  
    

      
        Houses
      
      

      

      

      
      

        Note: Not zoomable on mobile
      
    

  

92 có liên quan đến giá trị ban đầu 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;
  }
}

6

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ử

  @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 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. )
• chúng tôi sẽ sử dụng một

  
  
    
       Disable the Zoom
      
      
    
    
      
  
        
          Houses
        
        
  
        
  
        
  
        
        
  
          Note: Not zoomable on mobile
        
      
  
    
  

  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ử

  @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
• chúng tôi sẽ bọc mã bằng

  
  
    
       Disable the Zoom
      
      
    
    
      
  
        
          Houses
        
        
  
        
  
        
  
        
        
  
          Note: Not zoomable on mobile
        
      
  
    
  

  83 này ở mọi nơi chúng tôi muốn áp dụng truy vấn phương tiện

Đâ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
      




    

4

Và 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ệu

Cá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ắt

Tă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

Làm cách nào để thu nhỏ trang JavaScript?

Làm cách nào để đặt thu phóng CSS?

Thu phóng trang là gì?

Làm cách nào để thu nhỏ trong CSS?