Wil*_*ing 5 css printing printing-web-page css3
我正在尝试使用@media打印以及最小宽度和最大宽度来定位当前选定的纸张尺寸,以优化在正常尺寸纸张(例如字母大小)和照片尺寸纸张(通常为4x6)上打印.但媒体查询似乎没有正确评估.
这是我的HTML示例:
<html>
<head>
<link rel="stylesheet" type="text/css" href="photo.css">
</head>
<body>
<div class="post">
<div class="info">CSS: </div>
</div>
</body>
</html>
这是我的CSS文件的片段:
@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"
}
}
我有宽度低至1到2英寸的宽度.
当8.5x11纸张,肖像被选中时,我看到"CSS:匹配5到6".我希望看到"CSS:匹配7到8",因为0.5%的保证金.
选择8.5x11纸张,横向时,我会看到"CSS:匹配7到8".我希望看到"CSS:匹配9到10"(再次,因为左边和右边距为0.5英寸).
当选择4x6纸张,肖像时,我看到"CSS:匹配2到3".这是正确的,因为4 - (2*0.5)= 3.但是当选择横向时,我看到"CSS:匹配3到4",当我希望看到"CSS:匹配4到5"时.
我正在Chrome,File-> Print中完成所有这些工作.
我错了什么？
通常，这是由于边框、边距或填充造成的。
删除边距并使用：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
或添加边距/填充/边框的宽度/高度是另一种解决方案。
| 归档时间： |
|
| 查看次数： |
1202 次 |
| 最近记录： |