Làm cách nào để thu nhỏ nội dung css?

Gần đây tôi đang thực hiện một nhiệm vụ mà tôi phải triển khai tính năng phóng to/thu nhỏ cho nội dung văn bản trong một vùng chứa div

Ở giai đoạn đầu, tính năng này có vẻ dễ thực hiện nhưng sau này, tôi thấy rằng điều này hơi phức tạp, vì tôi phải triển khai tính năng này với một số điều kiện bổ sung như khi chúng tôi phóng to - nội dung văn bản không được vượt ra ngoài vùng chứa và . Ngoài ra, nó sẽ hoạt động trong tất cả các trình duyệt

Xem xét tuyên bố vấn đề, tôi đã tìm thấy nhiều cách tiếp cận khác nhau để phóng to/thu nhỏ nội dung văn bản với những ưu và nhược điểm. Vì vậy, trong bài viết này, chúng ta sẽ xem tất cả các cách tiếp cận để triển khai nội dung thu phóng văn bản bằng CSS và JavaScript

Thiết lập ứng dụng ban đầu

Đoạn mã HTML ban đầu mà chúng tôi sẽ triển khai tính năng thu phóng. Chúng tôi có một div textContent chứa văn bản và hai nút một để phóng to và một để thu nhỏ. Khi bấm nút phóng to/thu nhỏ ta sẽ phóng to hoặc thu nhỏ nội dung văn bản.   

1.     

2.   

       

3. Phóng to thu nhỏ triển khai
4.     

   Ba cách tiếp cận khác nhau

       
5.     
       
   •       
   • Thuộc tính CSS Zoom 
       
   •       
   • chuyển đổi CSS. tỉ lệ()
       
   •       
   • Sử dụng kích thước phông chữ
       
   •     
       
6.   

    

    

➕ Phóng In

➖ Thu nhỏ

Nhiều cách tiếp cận khác nhau để triển khai tính năng thu phóng bằng CSS và JavaScript

• Thu phóng với Thuộc tính Thu phóng CSS
• Thu phóng với chuyển đổi CSS. hàm tỷ lệ ()
• Thu phóng với cỡ chữ tương đối của nội dung văn bản

Vì vậy, hãy bắt đầu với cách tiếp cận đầu tiên

Thu phóng nội dung văn bản bằng thuộc tính thu phóng CSS

Cách tiếp cận này rất dễ sử dụng. chúng ta chỉ cần tự động đặt thuộc tính thu phóng CSS của vùng chứa bằng JavaScript dựa trên nút Phóng to và Thu nhỏ.  

Như hình bên dưới, khi click zoom in ta sẽ tăng mức zoom lên 0. 1 và khi nhấp vào thu nhỏ, chúng tôi sẽ giảm nó xuống 0. 1

1. nhập khẩu ". /Phong cách. css";
2. const textNội dung. HTMLElement = tài liệu. getElementById("textContent");
3. const btnPhóng to. HTMLElement = tài liệu. getElementById("phóng to");
4. const btnZoomOut. HTMLElement = tài liệu. getElementById("thu nhỏ");
5. để zoomLevel = 1;
6. btnPhóng to. addEventListener("click", () => {
7. nếu (Mức thu phóng < 2) {
8. zoomLevel = zoomLevel + 0. 1;
9. văn bảnnội dung. Phong cách. thu phóng = `${zoomLevel}`;
10. }
11. });
12. btnThu nhỏ. addEventListener("click", () => {
13. nếu (Mức thu phóng > 1) {
14. zoomLevel = zoomLevel - 0. 1;
15. văn bảnnội dung. Phong cách. thu phóng = `${zoomLevel}`;
16. }
17. });

Bạn có thể đặt thuộc tính thu phóng bằng số hoặc tỷ lệ phần trăm.  

• phóng. 1 hoặc thu phóng. 100% là cho kích thước bình thường.   
• phóng. 1. 1 hoặc thu phóng. 110% để tăng mức thu phóng
• phóng. 0. 9 hoặc thu phóng. 90% để giảm mức thu phóng.                

• Nó rất dễ dàng để sử dụng.  
• Nó không thay đổi kích thước bố cục. bọc nội dung văn bản khi được yêu cầu
• Được hỗ trợ bởi Chrome, Edge, IE, Safari

• Đó là một tính năng phi tiêu chuẩn
• Không được hỗ trợ bởi firefox

Phóng to nội dung văn bản với biến đổi CSS. hàm tỷ lệ ()

chuyển đổi CSS. scale() thuộc tính được hỗ trợ bởi tất cả các trình duyệt và có thể được sử dụng thay thế cho thuộc tính zoom CSS, để phóng to nội dung

1. nhập khẩu ". /Phong cách. css";
2. const textNội dung. HTMLElement = tài liệu. getElementById("textContent");
3. const btnPhóng to. HTMLElement = tài liệu. getElementById("phóng to");
4. const btnZoomOut. HTMLElement = tài liệu. getElementById("thu nhỏ");
5. để zoomLevel = 1;
6. btnPhóng to. addEventListener("click", () => {
7. nếu (Mức thu phóng < 2) {
8. zoomLevel = zoomLevel + 0. 1;
9. văn bảnnội dung. Phong cách. biến đổi = `scale(${zoomLevel})`;
10. văn bảnnội dung. Phong cách. transformOrigin = `đầu trái`;
11. }
12. });
13. btnThu nhỏ. addEventListener("click", () => {
14. nếu (Mức thu phóng > 1) {
15. zoomLevel = zoomLevel - 0. 1;
16. văn bảnnội dung. Phong cách. biến đổi = `scale(${zoomLevel})`;
17. văn bảnnội dung. Phong cách. transformOrigin = `đầu trái`;
18. }
19. });

Kiểm tra ví dụ Live Stackblitz tại "Thu phóng với chuyển đổi CSS. tỷ lệ () chức năng"

• Được hỗ trợ trong tất cả các trình duyệt
• dễ sử dụng

Bất lợi

• Nó thay đổi bố cục vùng chứa khi bạn mở rộng quy mô
• Nó không bọc văn bản

Thu phóng với cỡ chữ tương đối của nội dung văn bản

Cách tiếp cận này hơi phức tạp, vì ở đây chúng ta cần đặt kích thước phông chữ của nội dung văn bản bên trong với độ dài tương đối bằng cách sử dụng em thay vì px. Khi nhấp vào nút phóng to, chúng tôi sẽ tăng kích thước phông chữ của vùng chứa văn bản chính, dựa trên kích thước nội dung văn bản bên trong đó sẽ được thay đổi

Như bạn có thể thấy bên dưới, #textContent là div chính bao quanh tất cả nội dung văn bản, chúng tôi sẽ đặt kích thước mặc định của văn bản trong vùng chứa là 16px và kích thước phông chữ nội dung văn bản con của nó sẽ tương ứng với cấp độ gốc mà chúng tôi

1. #textContent {
2. cỡ chữ. 16px;
3. }
4. h1 {
5. cỡ chữ. 1. 5em;
6. }
7. P {
8. cỡ chữ. 1em;
9. }
10. li {
11. cỡ chữ. 1. 25em;
12. }

Bây giờ để phóng to và thu nhỏ, chúng ta sẽ tăng/giảm kích thước phông chữ của vùng chứa #textContent, điều này sẽ thay đổi kích thước của nội dung văn bản bên trong của nó

1. nhập khẩu ". /Phong cách. css";
2. const textNội dung. HTMLElement = tài liệu. getElementById("textContent");
3. const btnPhóng to. HTMLElement = tài liệu. getElementById("phóng to");
4. const btnZoomOut. HTMLElement = tài liệu. getElementById("thu nhỏ");
5. để zoomLevel = 1;
6. để rootFontSize = 16;
7. btnPhóng to. addEventListener("click", () => {
8. nếu (Mức thu phóng < 2) {
9. zoomLevel = zoomLevel + 0. 1;
10. rootFontSize = rootFontSize + 2;
11. văn bảnnội dung. Phong cách. Cỡ chữ = `${Cỡ chữ gốc}px`;
12. }
13. });
14. btnThu nhỏ. addEventListener("click", () => {
15. nếu (Mức thu phóng > 1) {
16. zoomLevel = zoomLevel - 0. 1;
17. rootFontSize = rootFontSize - 2;
18. văn bảnnội dung. Phong cách. Cỡ chữ = `${Cỡ chữ gốc}px`;
19. }
20. });

• Được hỗ trợ trong tất cả các trình duyệt
• Nó không thay đổi bố cục vùng chứa và bọc nội dung văn bản nếu được yêu cầu

Nhược điểm

• Hơi phức tạp so với cách triển khai ở trên vì tất cả nội dung văn bản bên trong phải có cỡ chữ có độ dài tương đối như em thay vì độ dài cố định như px.

Vì cách tiếp cận này đáp ứng yêu cầu của tôi về nội dung văn bản thu phóng với kích thước vùng chứa cố định và gói văn bản, tôi đã triển khai điều này trong nhiệm vụ của mình. nhưng bạn có thể sử dụng bất kỳ phương pháp nào ở trên dựa trên yêu cầu của bạn.  

Bản tóm tắt

Trong bài viết này, chúng ta đã thấy ba cách tiếp cận khác nhau để triển khai tính năng thu phóng

Tôi hy vọng bạn thích bài viết này, vui lòng cung cấp phản hồi và đề xuất có giá trị của bạn trong phần bình luận bên dưới 🙂.