@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ụ Show
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ế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 { @media in { 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 { tiết diện. bản đồ thành phố { bàn { Mẹo. Lặp lại tiêu đề bảngNế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
Khi được in, bảng của bạn sẽ trông giống như thế này 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 { 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. */ @media in { 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” 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 { Ở 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 @pageVớ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 { @trang { 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ượcBâ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 . |