Hướng dẫn how do i add a print media query in css? - làm cách nào để thêm truy vấn phương tiện in trong css?

Trang web có thể được in, nhưng bạn có thể đã biết điều đó rồi. Bạn có thể không làm điều đó thường xuyên, bởi vì, tốt, chúng thường xấu xí, quá dài hoặc một mớ hỗn độn hoàn toàn. Nhưng những gì bạn có thể không biết, là chúng tôi có thể xác định các kiểu CSS riêng biệt bằng cách sử dụng các truy vấn phương tiện cho các trang web chuyển thành một chữ cái hoặc tài liệu A4.media queries for webpages that translate to a Letter or A4 document.

Các trang web bán vé thường xuyên làm điều này (nghĩ: Boarding Pass, vé vào cửa, bằng chứng mua hàng, hóa đơn, et cetera), nhưng đó không phải là tiêu chuẩn cho nội dung hàng ngày, thật xấu hổ vì người dùng cố gắng cung cấp nội dung ngoại tuyến nhiều hơn Bạn nghĩ (tức là trước một chuyến bay, như một tài liệu tham khảo có thể in, et cetera).

Chúng ta hãy xem nhanh cách chúng ta có thể viết các truy vấn truyền thông cho nội dung có thể in và có thể xuất. Nó siêu dễ dàng, nó sẽ chỉ mất một phút! Chúng tôi sẽ sử dụng adobe XD Bedboard Shortcut CheatSheet từ blog/trang web của tôi làm ví dụ.

Đây là những gì bài báo trông như thế nào trên web:

Và đây là những gì nó trông giống như một PDF, trước khi tối ưu hóa CSS:

FYI: Bạn có thể in từ web bằng cách sử dụng phím tắt CTRL/CMD+P.Ctrl/cmd+P.

Trước hết, chúng tôi xác định truy vấn truyền thông:

@media print {
    /* styles here */
}

Giả sử rằng điều này xuất hiện ở dưới cùng của bảng kiểu CSS của bạn, hầu hết các kiểu trong truy vấn phương tiện để in nên ghi đè lên bất cứ điều gì khác tồn tại một cách dễ dàng.

Nếu không, hãy thử sử dụng quy tắc !important.

Bước 2: Ẩn dự phòng

Khi tải xuống các trang web dưới dạng PDF, người dùng không cần:

• Yếu tố UI
• Header/footer
• Nội dung thanh bên
• Hình thức và CTA
• Vân vân

Chúng ta cần che giấu các yếu tố đó bằng display:none;.

Mã của chúng tôi sau đó trở thành (làm ví dụ):

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

Ví dụ của chúng tôi sau đó trông như thế này:

Không tệ, nhưng có một số khoảng cách không mong muốn ở phía trên.

Chúng tôi sẽ muốn "đặt lại" khoảng cách này, điều này sẽ không nhất thiết nằm trên thẻ . Trong trường hợp của tôi, đó là một margin: trên phần tử

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

0, do đó:

@media print {
  header, footer, aside, form, … {
    display: none;
  }
  article {
    width:100%!important;
    padding:0!important;
    margin:0!important;
  }
}

Bước 3: Tùy chỉnh lề trang

Trình duyệt thực sự khá hiệu quả khi nói đến việc xác định lại tỷ suất lợi nhuận trang và nội dung xếp chồng. Điều đó đang được nói, bạn có thể muốn xác định tỷ suất lợi nhuận của riêng bạn, điều này rất dễ thực hiện. Chỉ cần nhớ sử dụng

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

1 thay vì

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

2!

Mã của chúng tôi sau đó trở thành:

@media print {
  header, footer, aside, form, … {
    display: none;
  }
  article {
    width:100%!important;
    padding:0!important;
    margin:0!important;
  }
}
@page {
  margin: 2cm;
}

Như bạn có thể thấy từ ví dụ mã ở trên, lề được xác định bằng cách sử dụng quy tắc

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

3, chứ không phải bằng cách thêm tỷ suất lợi nhuận vào phần tử , vì chỉ tồn tại một lần và mở rộng chiều cao của tất cả các trang. Với tuyên bố này, chúng tôi thậm chí có thể xác định các lề riêng cho các trang đầu tiên, cuối cùng, trái và phải (trong trường hợp có thể xuất khẩu có thể xuất khẩu nhiều hơn một trang số ít), ví dụ::

@page:first {
    margin: 0cm;
}
@page:last {
    margin: 5cm;
}
@page:left {
    margin: 2cm 1.5cm 2cm 2cm;
}
@page:right {
    margin: 2cm 2cm 2cm 1.5cm;
}

Bước 4: Liên kết xử lý

Các liên kết vẫn có thể nhấp vào PDF, nhưng đối với những người dùng có thể muốn giữ nội dung về mặt vật lý, chúng ta sẽ cần đưa ra một cái gì đó sáng tạo hơn. Chính Ben Frain ban đầu đã giác ngộ tôi về mánh khóe thực sự đơn giản này.

@media print {
  a:after {
    content: "("attr(href)")";
  }
}

Những gì điều này làm, là lấy giá trị của thuộc tính

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

6 và hiển thị nó trong ngoặc sau liên kết, như thế này:

Thủ thuật thú vị (https://benfrain.com/create-print-styles-using-css3-media-queries)

———

Tôi sẽ để lại cho bạn một lời khuyên cuối cùng: Để lại một cái gì đó trong phiên bản có thể in có tên của bạn và bất kỳ thông tin bản quyền nào cần thiết!

---

Sympli là một công ty SaaS tạo ra các công cụ để hợp tác thiết kế, bàn giao và kiểm soát phiên bản. Với hơn 5 năm trên thị trường, chúng tôi đã giúp hàng ngàn nhà thiết kế và nhà phát triển làm việc cùng nhau bằng cách cung cấp một nguồn sự thật duy nhất và giảm liên lạc qua lại, dẫn đến phân phối nhanh hơn.

Làm cách nào để in một truy vấn truyền thông trong CSS?

Bạn có thể sử dụng các truy vấn truyền thông trong CSS không?