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

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

싸이드뤠이스
프로필 보기이 회원 글보기
 · 7년 전 · 4865 · 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년 전
유용한 정보 감사합니다.

게시글 목록

번호 제목
3168
CSS CSS3 border-image Property
3167
CSS CSS3 border-radius - 각 모서리 지정
3166
CSS CSS3 border-radius 속성
3165
HTML HTML5 로컬 저장소
3164
HTML HTML5 드래그 앤 드롭
3163
HTML HTML5 Geolocation 사용자 위치 찾기
3162
HTML YouTube 동영상 ID
3161
HTML HTML 도우미 (플러그인)
3160
HTML HTML5 Audio on the Web(웹상의 오디오)
3159
HTML HTML5 비디오
3158
HTML HTML 멀티미디어 오디오 형식
3157
HTML HTML 멀티미디어
3156
기타 Google 아이콘
3155
기타 부트 스트랩 아이콘
3154
기타 아이콘을 추가하는 방법
3153
반응형 부트 스트랩 <blockquote>
3152
반응형 부트 스트랩 <abbr>
3151
반응형 부트 스트랩 <mark>
3150
반응형 부스트랩 html small tag
3149
반응형 부트 스트랩의 기본 설정
3148
반응형 부트 스트랩 그리드 시스템
3147
CSS 왼쪽에 툴팁 나오게 하는 소스
3146
CSS 오른쪽에 툴팁 나오게 하는 소스
3145
CSS css를 이용한 툴팁만들기
3144
CSS CSS3 Word Breaking
3143
CSS CSS3 Word Wrapping
3142
CSS CSS3 텍스트 오버플로(CSS3 Text Overflow)
3136
CSS css 이미지 갤러리
3135
CSS CSS 드롭 다운 2
3134
CSS css 기본 툴팁
이전 다음
전체 목록