Làm cách nào để phóng to văn bản trong css?
|
Thuộc tính Show “được hỗ trợ. giá trị là
Nếu trình duyệt của bạn hỗ trợ, bạn sẽ thấy những hình ảnh này ở các kích cỡ khác nhau Check out this Pen! Thu phóng là một thứ IE cũ. Đó không phải là thứ bạn nên sử dụng trên các trang web trực tiếp. Nếu bạn muốn chia tỷ lệ nội dung, hãy sử dụng CSS Transforms. Bạn cũng có thể sử dụng các bộ lọc nếu cần hỗ trợ oldIE Quay trở lại thời của IE6, zoom được sử dụng chủ yếu như một bản hack. Nhiều lỗi hiển thị trong cả IE6 và IE7 có thể được sửa bằng tính năng thu phóng. Ví dụ, Check out this Pen!1 không hoạt động tốt trong IE6/7. Cài đặt Check out this Pen!2 đã khắc phục sự cố. Lỗi liên quan đến cách IE hiển thị bố cục của nó. Cài đặt Check out this Pen!2 đã bật thuộc tính nội bộ có tên hasLayout, khắc phục sự cố Các nguồn lực khác
Hỗ trợ trình duyệtChromeSafariFirefoxOperaIAndroidiOSAny4. 0+KhôngCóKhông5. 5+TBDTBDSafari cũng hỗ trợ Check out this Pen!1. Điều đó nói với trình duyệt không phóng to phần tử của bạn khi thu phóng. Vì vậy, cmd/ctrl của bạn? Trước đây khi người dùng sử dụng các phím Check out this Pen!6/ Check out this Pen!7 với các phím Check out this Pen!8/ Check out this Pen!9 để phóng to và thu nhỏ, các trình duyệt sẽ chỉ tăng kích thước văn bản. Điều này sẽ tăng khả năng đọc với nội dung văn bản thuần túy, nhưng nội dung tĩnh, chẳng hạn như hình ảnh, sẽ vẫn còn Ngày nay, khi ai đó sử dụng tính năng thu phóng mặc định của trình duyệt, các trình duyệt hiện đại sẽ thu phóng bằng cách giảm kích thước khung nhìn; . Điều này dẫn đến mọi thứ xuất hiện lớn hơn trong khi vẫn có thể đọc được Mặc dù tính năng thu phóng khung nhìn thời hiện đại được đánh giá cao, một số người vẫn sử dụng công cụ để chỉ tăng kích thước văn bản. Tùy thuộc vào cách mã hóa CSS, việc chỉ thu phóng văn bản có thể dẫn đến một số rào cản về khả năng truy cập, chủ yếu là khả năng đọc nội dung văn bản thuần túy Theo 1. 4. 4 Thay đổi kích thước văn bản, người dùng có thể phóng to lên đến Check out this Pen!0 mà nội dung văn bản vẫn có thể đọc được CSS có vấn đềNhững vấn đề này thường xuất phát từ CSS sử dụng các đơn vị tĩnh, nghĩa là pixel để định cỡ. Lấy ví dụ sau Với CSS này, khi ai đó phóng to qua văn bản, kích thước tĩnh sẽ hạn chế khả năng đọc văn bản; Đơn vị kích thước linh hoạtĐể giải quyết vấn đề này, hãy cho phép vùng chứa văn bản và nội dung phát triển tự nhiên khi văn bản được thay đổi kích thước. Khi viết CSS có thể truy cập, cần tránh các đơn vị kích thước tĩnh như Check out this Pen!1. Bất cứ khi nào có thể, hãy sử dụng các đơn vị linh hoạt như Check out this Pen!2, Check out this Pen!3 hoặc Với CSS này, vùng chứa nội dung giờ đây sẽ thay đổi kích thước cùng với văn bản khi bắt đầu thu phóng chỉ văn bản. Điều này là do kích thước đơn vị Check out this Pen!3 dựa trên kích thước phông chữ vùng chứa Kiểm tra bản trình diễn Làm thế nào để kiểm traCó một số tiện ích mở rộng của trình duyệt Chrome mà bạn có thể sử dụng để kiểm tra, nhưng khuyến nghị là sử dụng chức năng thu phóng văn bản tích hợp với Firefox. Đây là cách để thực hiện điều này
Điều được mong đợi là khi văn bản tăng kích thước, các phần tử sẽ tăng tỷ lệ tương ứng. Tuy nhiên, thường thì những gì thực sự diễn ra là khi văn bản tăng kích thước, nội dung bị che khuất và khó đọc. Đây là rào cản tiếp cận chúng ta cần tránh Hãy nhớ rằng, điều quan trọng ở đây là nội dung văn bản có thể đọc được và sử dụng được. Thông thường, khi văn bản được phóng to đến Check out this Pen!0, bố cục và các phần khác có thể trông không được lý tưởng, nhưng nếu nội dung có thể đọc được thì bạn đã đáp ứng yêu cầu này Tiêu chí thành công của WCAGĐiều này trở lại 1. 4. 4 Thay đổi kích thước văn bản có trạng thái
|
