테스트 사이트 - 개발 중인 베타 버전입니다
SIR

미디어 쿼리(media query) - 프린트 일때만 작동되게 하기

싸이드뤠이스
프로필 보기이 회원 글보기
 · 7년 전 · 4864 · 5

/* Landscape mode */

@media only print and (orientation: landscape) {

body { min-width:1440px; }

}

 

/* Portrait mode */

@media only print and (orientation: portrait) {

body { min-width:1270px; }

}

 

 

크롬은 괜찮은데 IE에서 프린트 출력시에 글자가 커질때도 있고, 작아질때도 있는 것을 발견하였다.

역시 빌어먹을 IE는 웹개발자들의 적이다.

2,3일 삽질결과

전체를 감싸는 컨테이너 사이즈가 동적으로 변하면서, 글자가 커지기도 작아지기도 하는 것이었다.

그래서 위와같이 프린트를 할때는 body 사이즈를 고정하는 CSS 소스를 적용결과 만족스런 결과물이 나왔습니다.
목록
이전글 다음글

댓글 작성

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

로그인하기

댓글 5개

die
프로필 보기이 회원 글보기
 7년 전
감사합니다
카아드
프로필 보기이 회원 글보기
 7년 전
감사합니다!!
UnknownBox
프로필 보기이 회원 글보기
 7년 전
<style media="print"> 도 된다지요 ㅎㅎ
워닝닝
프로필 보기이 회원 글보기
 7년 전
감사합니다 ㅎㅎ
메이팅012
프로필 보기이 회원 글보기
 7년 전
유용한 정보 감사합니다.

게시글 목록

번호 제목
3199
CSS skewX () 메서드 , skewY () 메서드, skew () 메서드
3198
CSS scale () 메서드
3197
CSS rotate () 메서드
3196
CSS CSS3 2D변환 - translate() 메서드
3195
CSS CSS3 단어 속보
3194
CSS CSS3 워드 래핑
3192
CSS css 굵은 글씨 사용
3191
CSS css 원하는 글꼴 사용하기
3190
CSS CSS3 웹 폰트 - @ font-face 규칙
3189
CSS CSS3 텍스트 오버플로 세번째
3188
CSS CSS3 텍스트 오버플로 두번째
3187
CSS CSS3 상자 그림자 속성
3186
CSS CSS3 그림자 효과 다섯번째
3185
CSS CSS3 그림자 효과 네번째
3184
CSS CSS3 그림자 효과 세번째
3183
CSS CSS3 그림자 효과 두번째
3182
CSS CSS3 그림자 효과
3181
CSS CSS3 그라디언트 방사형 그라데이션 반복
3180
CSS CSS3 그라디언트 다른 크기의 키워드 사용
3179
CSS CSS3 그라디언트 모양 설정
3178
CSS CSS3 방사형 그라디언트 - 다른 간격의 색상 정지
3177
CSS CSS3 그라디언트 두번째
3176
CSS CSS3 그라디언트
3175
CSS CSS3 Colors
3174
CSS CSS3 background-clip 속성
3173
CSS CSS3 background-origin 속성
3172
CSS css3 전체 크기 배경 이미지
3171
CSS css3 여러 배경 이미지의 크기 정의
3170
CSS CSS3 배경 크기
3169
CSS CSS3 다중 배경
이전 다음
전체 목록