Tôi đang cố gắng sử dụng chế độ in @media cùng với chiều rộng tối thiểu và chiều rộng tối đa để nhắm mục tiêu kích thước giấy được chọn hiện tại, để tối ưu hóa in trên cả giấy có kích thước bình thường (ví dụ: cỡ chữ) so với giấy có kích cỡ ảnh (thường là 4x6) . Nhưng các truy vấn phương tiện dường như không được đánh giá đúng.Tại sao truy vấn phương tiện in rộng không chính xác?
Dưới đây là một ví dụ về HTML của tôi:
<html>
<head>
<link rel="stylesheet" type="text/css" href="photo.css">
</head>
<body>
<div class="post">
<div class="info">CSS: </div>
</div>
</body>
</html>
Dưới đây là một đoạn của file CSS của tôi:
@media print {
@page {
margin: 0.5in;
}
}
@media print and (max-width: 12.0in) and (min-width:11.0in) {
.info:after {
content: "Matched 11 to 12"
}
}
@media print and (max-width: 11.0in) and (min-width:10.0in) {
.info:after {
content: "Matched 10 to 11"
}
}
@media print and (max-width: 10.0in) and (min-width:9.1in) {
.info:after {
content: "Matched 9 to 10"
}
}
Tôi có những người cho mỗi chiều rộng xuống đến 1-2 inches.
Khi giấy 8,5x11, chân dung được chọn, tôi thấy "CSS: Đã khớp từ 5 đến 6". Tôi hy vọng sẽ thấy "CSS: phù hợp 7 đến 8", vì tỷ lệ 0,5in.
Khi giấy 8,5x11, cảnh quan được chọn, tôi thấy "CSS: Khớp từ 7 đến 8". Tôi mong đợi để xem "CSS: phù hợp 9-10" (một lần nữa, vì 0,5in lề trái và phải).
Khi giấy 4x6, chân dung được chọn, tôi thấy "CSS: So khớp 2 đến 3". Đó là chính xác, bởi vì 4 - (2 * 0.5) = 3. Nhưng khi phong cảnh được chọn, tôi thấy "CSS: phù hợp 3 đến 4", khi tôi mong đợi để xem "CSS: phù hợp 4 đến 5".
Tôi đang làm tất cả điều này trong Chrome, Tệp-> In.
Tôi đang gặp vấn đề gì?
Chỉ cần rõ ràng, vấn đề là truy vấn phương tiện luôn có vẻ là một trang nhỏ hơn nhiều so với trang thực tế. –
bạn đã thử loại bỏ các lề? – dippas
Bạn đã thử sử dụng trình thiết lập lại CSS chưa? – GibboK