테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

반응형웹에서 PC버전으로 프린트

VRCHAMI 5년 전 조회 3,148
답변 1
목록 

 </p>

<p>@media print{

    body{margin:10px}

    table { border-collapse: collapse; }</p>

<p>    .no-print, .no-print * { display: none !important; }</p>

<p>}</p>

<p>@media (max-width: 768px) { </p>

<p>    table th, table td  {</p>

<p>        width: calc(100%/2);</p>

<p>        line-height:15px;</p>

<p>        display: inline-block;</p>

<p>        height: auto;</p>

<p>        min-height: 30px;</p>

<p>    }</p>

<p>} </p>

<p>

 

위와 같이 반응형 웹페이지 CSS안에 프린트 미디어쿼리를 와 반응형 미디어 퉈리를 따로 주었는데 프린트 출력을 하니 출력물 테이블이 미디어쿼리 768px 버전이 적용이 되어서 출력이 됩니다.

 

해당 미디어쿼리 프린트에 반응형 미디어쿼리가 적용이 안되게 하는 방법이 있을까요?

 

만일 코드가 있다면 답변을 주시면 감사하겠습니다 ㅠㅠ

 

PS. 해당 반응형웹 프린트는 미리보기 팝업이 나오고 거기서 팝업 안에 출력버튼을 누르면 출력이 되는방식으로 한 상태에서도 미디어쿼리 768px 버전이 같이 적용이 되었습니다...

#프린트 #반응형웹 #미디어쿼리
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

검은냥냥이

음... 관련 사이트를 올려주시면 좋긴하겠지만

될지는 모르겠네요.

 

기존 프린트 태그에도 테이블 넣어서 조정해주면 되지 않을까요?

</p>

<pre>
<code>@media print{
    body{margin:10px}
    table { 
      border-collapse: collapse; 
    }
    table th, table td {
      width: </code>100% !important;
<code>    }
    .no-print, .no-print * { display: none !important; }
}
@media (max-width: 768px) { 
    table th, table td  {
        width: calc(100%/2);
        line-height:15px;
        display: inline-block;
        height: auto;
        min-height: 30px;
    }
}
</code>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

V
VRCHAMI
5년 전
답변주셔서 감사합니다.
알려주신 방법을 해보고 그리고 반응형 미디어 쿼리를 올리고 미디어 쿼리를 내려서 순서를 바꾸니 되었습니다.
감사합니다.
�
검은냥냥이
5년 전
굿 입니다!

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인