인쇄 폭 미디어 쿼리가 올바르지 않은 이유는 무엇입니까?

보통 크기 용지 (예 : 레터 크기) 대 사진 크기 용지 (일반적으로 4x6) 모두에 최적화되도록 현재 선택한 용지 크기를 대상으로 min-width 및 max-width와 함께 @media print를 사용하려고합니다. . 그러나 미디어 쿼리가 올바르게 평가되지 않는 것 같습니다.인쇄 폭 미디어 쿼리가 올바르지 않은 이유는 무엇입니까?

은 여기 내 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 : Matched 5 to 6"이 표시됩니다. 나는 "CSS : Matched 7 to 8"을 기대한다. 마진이 0.5in이기 때문이다.

가로 8.5x11 용지를 선택하면 "CSS : Matched 7 to 8"이 표시됩니다. 나는 "CSS : Matched 9 to 10"(왼쪽 및 오른쪽 여백이 0.5in이기 때문에)을 기대합니다.

4x6 종이 인물이 선택되면 "CSS : Matched 2 to 3"이 표시됩니다. 4 - (2 * 0.5) = 3이기 때문에 어느 것이 맞습니까? 그러나 풍경을 선택하면 "CSS : Matched 4 to 5"가 표시 될 것으로 예상 될 때 "CSS : Matched 3 to 4"가 표시됩니다.

Chrome에서 파일 -> 인쇄를하고 있습니다.

무엇이 잘못 되었나요?

출처

2014-09-17 William Hertling

분명히 말하자면 문제는 미디어 쿼리가 항상 실제 페이지보다 훨씬 작은 페이지 인 것입니다. –

여백 제거를 시도해 보셨습니까? – dippas

CSS 다시 설정해 보셨습니까? – GibboK

일반적으로 테두리, 여백 또는 패딩 때문입니다.

제거 마진 사용 :

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
}

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

또는 여백/패딩에 대한 너비/높이를 추가/테두리 다른 해결책이다.

출처

2014-11-04 09:03:47 ablueman

인쇄 폭 미디어 쿼리가 올바르지 않은 이유는 무엇입니까?

답변

관련 문제