@media print css là gì?

Nếu bạn đã thực hiện bất kỳ thiết kế đáp ứng nào, bạn sẽ biết về quy tắc @media. Cũng như các kích thước màn hình khác nhau, @media cũng cho phép bạn nhắm mục tiêu phương tiện "in". Đây là một ví dụ

Sử dụng quy tắc này, bạn có thể chỉ định CSS tiêu chuẩn của mình như bình thường và sau đó thêm một số kiểu tùy chỉnh sẽ chỉ được sử dụng khi in

p {lề. 1em 0;

@media in {
/* Ẩn các liên kết bài viết liên quan khi in. */
 . bài viết liên quan { hiển thị. không ai;
}

Nếu bạn muốn "bỏ qua" tất cả các kiểu màn hình tiêu chuẩn của mình và bắt đầu lại từ đầu, bạn có thể bọc các kiểu màn hình của mình trong một quy tắc @media khác

màn hình @media {
/* phong cách tiêu chuẩn ở đây. */
}

@media in {
/* phong cách in ở đây. */
}

Thuộc tính ngắt trang

Để đảm bảo nội dung trôi chảy trên các trang, bạn sẽ muốn kiểm soát thời điểm nội dung được phân chia giữa các trang. Ví dụ: có vẻ khó xử nếu một tiêu đề lớn xuất hiện ở cuối trang - thay vào đó bạn muốn nó bắt đầu trên một trang mới. Tương tự, bạn có thể muốn tránh một bảng kéo dài nhiều trang nếu có thể

Bạn có thể thực hiện việc này bằng ngắt trang trước, ngắt trang sau và ngắt trang bên trong. Bạn có thể đặt giá trị cho các thuộc tính này thành luôn luôn hoặc tránh

h1 {
/* phần tử h1 luôn bắt đầu ở đầu trang mới. */
ngắt trang trước. luôn;
}

tiết diện. bản đồ thành phố {
/* phần này luôn chiếm một hoặc nhiều trang riêng của nó. */
ngắt trang trước. luôn;
ngắt trang sau. luôn;
}

bàn {
/* bảng không phân chia giữa các trang nếu có thể. */
phá trang. tránh xa;
}

Mẹo. Lặp lại tiêu đề bảng

Nếu tài liệu của bạn có các bảng trải rộng trên nhiều trang, thì sẽ khó đọc khi được in trừ khi các tiêu đề bảng được lặp lại ở đầu mỗi trang. Điều này khá dễ thực hiện - chỉ cần sử dụng các phần tử thead và tbody trong bảng của bạn


 
   
     
     
 
 
   
     
     
   
 

Thành PhốDân SốSydney4. 627 triệu (2018)

Khi được in, bảng của bạn sẽ trông giống như thế này

@media print css là gì?

Mẹo. Thêm hoặc xóa nội dung

Đôi khi bạn có thể muốn thêm nội dung chỉ hiển thị khi in. Ví dụ: bạn có thể muốn liên kết các URL sẽ được in. Bạn có thể làm điều này bằng cách sử dụng. sau phần tử giả

@media in {
một[href]. sau đó {
nội dung. " (" attr(href) ")";
}
}

Bạn cũng có thể chỉ muốn ẩn hoặc hiển thị một số thành phần khi in. Bằng cách kết hợp @media và hiển thị, điều này có thể được thực hiện khá dễ dàng

/* ẩn watermark trên màn hình. */
Chữ ký ảnh {
trưng bày. không ai;
}

@media in {
/* ẩn điều hướng khi in. */
điều hướng {
trưng bày. ẩn giấu;
}
/* hiển thị watermark khi in */
 . Chữ ký ảnh {
trưng bày. ban đầu;
}
}

Mẹo. Sử dụng phương tiện CSS giả lập để phát triển

Để tăng tốc vòng phản hồi của bạn trong quá trình phát triển, bạn có thể đặt trình duyệt của mình hiển thị các kiểu in. Để thực hiện việc này trong Chrome trên máy Mac, hãy mở công cụ dành cho nhà phát triển, sau đó sử dụng phím tắt command-shift-P cho “Run Command” và tìm kiếm “Emulate CSS print media type”

@media print css là gì?

Các trình duyệt khác sẽ có tính năng tương tự trong công cụ dành cho nhà phát triển của họ

Thật không may khi thấy ngắt trang, bạn sẽ cần phải in PDF theo cách thủ công mỗi lần

Mẹo nâng cao. Trẻ mồ côi và góa phụ

Thuộc tính mồ côi và góa phụ kiểm soát cách văn bản trong phần tử được phân chia trên các trang. Đôi khi, việc điều chỉnh các giá trị này có thể cải thiện khả năng đọc tài liệu in của bạn

P {
/* nếu không có ít nhất ba dòng trước trang
ngắt, di chuyển phần tử đến đầu trang mới. */
trẻ mồ côi. 3;
}

@media print css là gì?

Ở bên trái bên dưới, mồ côi được đặt thành 2, vì vậy đoạn thứ hai bắt đầu trước khi ngắt trang. Bằng cách đặt orphans thành 3, như ở bên phải, đoạn văn được buộc xuống đầu trang tiếp theo

Thuộc tính góa phụ ngược lại với thuộc tính mồ côi - nó chỉ định số dòng tối thiểu có thể ở đầu trang mới

Mẹo nâng cao. quy tắc @page

Với quy tắc @page, bạn có thể tùy chỉnh lề trang cho các trang cụ thể

@trang. đầu tiên {
/* Không có lề trên trang đầu tiên. */
lề. 0;
}

@trang {
/* Đặt lề trên tất cả các trang khác. */
lề. 2cm;
}

Thật không may, hỗ trợ trình duyệt cho điều này hiện có một chút hạn chế và bạn chỉ có thể sử dụng. đầu tiên,. Cuối cùng,. bên trái,. Phải và. bộ chọn giả trống để chọn các trang

Tóm lược

Bây giờ bạn đã quen thuộc với các thuộc tính quan trọng đối với bố cục in được hỗ trợ bởi các trình duyệt hiện đại như Chrome, Firefox và Safari

Thật không may, hỗ trợ cho các tính năng bố cục in nâng cao hơn trong các trình duyệt hiện đại thường bị hạn chế. Ví dụ: các trình duyệt không cung cấp cách tiêu chuẩn để thêm nội dung đầu trang hoặc chân trang tùy chỉnh bằng CSS. Bạn có thể muốn kiểm tra phân trang. js cung cấp một polyfill cho nhiều tính năng bố cục in mà các trình duyệt hiện đang thiếu

Cuối cùng, nếu bạn đang chạy một ứng dụng web và muốn thêm chức năng PDF, hãy xem Paperplane - API chuyển đổi HTML sang PDF dễ sử dụng của chúng tôi

Tôi có thể sử dụng @media print không?

Bạn có thể @media print và @media screen để xác định nội dung sẽ được in và nội dung sẽ hiển thị trên màn hình .

Làm cách nào để sử dụng CSS để in?

Công cụ dành cho nhà phát triển . Trong Chrome, mở Công cụ dành cho nhà phát triển và chọn Công cụ khác, sau đó chọn Kết xuất từ ​​menu biểu tượng ba chấm ở trên cùng bên phải. Thay đổi Phương tiện giả lập CSS để in ở cuối bảng điều khiển đó.

Sự khác biệt giữa @media all và @media screen là gì?

@media thực sự là truy vấn phương tiện . Màn hình từ đang thêm 'điều kiện' vào truy vấn phương tiện. Vì vậy, màn hình @media đang yêu cầu truy vấn phương tiện áp dụng (bất kể điều kiện nào khác) cho màn hình. Ví dụ: @media screen và (max-width. 360px) sẽ chỉ nhắm mục tiêu các màn hình có chiều rộng tối đa là 360px.

Màn hình @media và chiều rộng tối đa 600px là gì?

@màn hình chỉ phương tiện và (chiều rộng tối đa. 600px) {. } Ý nghĩa thực sự của truy vấn này là “ Nếu [chiều rộng thiết bị] nhỏ hơn hoặc bằng 600px thì hãy thực hiện {…} ”. Vì vậy, nếu email .