이것은 지금 내 프로세스입니다.
- print.css에 변경 사항 저장
- 브라우저를 열고 페이지를 새로 고칩니다.
- 마우스 오른쪽 버튼을 클릭하고 인쇄> 인쇄 미리보기 (Firefox, 그러나 모든 브라우저)를 선택하십시오.
나에게 버그가되는 3 단계이며 플러그인이나 무언가로 프로세스에서 잘라낼 수 있는지 궁금합니다. 페이지를 인쇄 매체로 보도록 선택한 다음 변경 내용을 보려면 새로 고치기 만하면됩니다.
인쇄 스타일 시트를 어떻게 테스트합니까? 새로 고침 후 항상 인쇄 미리보기를 클릭합니까?
답변
게시물에 허용 된대로 Chrome 미디어 유형 에뮬레이션 을 사용할 수 있습니다 . 브라우저의 인쇄 CSS를 참조하십시오 .
업데이트 21/11/2017
업데이트 된 DevTools 문서는 다음 위치에서 찾을 수 있습니다 . 인쇄 모드에서 페이지보기 .
인쇄 모드에서 페이지를 보려면 :
1. 명령 메뉴를 엽니 다 . ( tl; dr Cmd+Shift+P (Mac) 또는 Ctrl+Shift+P(Windows, Linux))
2. 입력을 시작하고을 Rendering선택Show Rendering합니다.
3. CSS 미디어 에뮬레이션 드롭 다운에서 인쇄를 선택 합니다.
업데이트 29/02/2016
DevTools 문서가 이동했으며 위의 링크가 부정확 한 정보를 제공합니다. 미디어 유형 에뮬레이션과 관련하여 업데이트 된 문서는 여기에서 찾을 수 있습니다 . 더 많은 미디어 유형에 대한 스타일 미리보기 .
브라우저 뷰포트의 오른쪽 상단 모서리에있는 재정의 ••• 재정의 아이콘 을 클릭하여 DevTools 에뮬레이션 서랍을 엽니 다 . 그런 다음 에뮬레이션 드로어 에서 매체 를 선택하십시오 .
2016 년 12 월 4 일 업데이트
불행히도 인쇄 에뮬레이션과 관련하여 문서가 업데이트되지 않은 것 같습니다. 그러나 인쇄 매체 에뮬레이터가 다시 이동되었습니다.
- Chrome 개발자 도구 열기
- esc키보드를 누르 십시오
- ⋮ (수직 줄임표)을 클릭하십시오.
- 렌더링 선택
- Tick Emulate 인쇄 매체
아래 스크린 샷을 참조하십시오 :
2016 년 6 월 28 일 업데이트
Chrome 개발자 도구 관련 Chrome 개발자 도구 및 “미디어 에뮬레이션”옵션이 Chrome> 51에 대해 업데이트되었습니다.
https://developers.google.com/web/tools/chrome-devtools/settings?hl=ko#emulate-print-media
인쇄 미리보기 모드에서 페이지를 보려면 DevTools 기본 메뉴를 열고 추가 도구 > 렌더링 설정 을 선택한 다음 드롭 다운 메뉴가 인쇄로 설정된 상태에서 미디어 에뮬레이션 확인란 을 활성화하십시오 .
2016 년 5 월 24 일 업데이트
설정 이름이 다시 한 번 변경되었습니다.
인쇄 미리보기 모드에서 페이지를 보려면 DevTools 기본 메뉴를 열고 추가 도구 > 렌더링 을 선택한 다음 드롭 다운 메뉴가 인쇄로 설정된 상태에서 CSS 미디어 에뮬레이션 확인란 을 활성화하십시오 .
답변
Firefox에서는 Shift+F2개발자 도구 모음 명령 줄을 열고 입력 한 다음media emulate print
이 방법으로 다른 매체 유형을 에뮬레이트 할 수도 있습니다.
답변
Firefox + Web Developer 도구 모음 확장 프로그램에는 다양한 스타일 시트를 활성화 / 비활성화하는 방법이 있습니다.
CSS 메뉴를보십시오. 개별 스타일 시트를 비활성화 및 활성화하는 메뉴와 “미디어 유형별 표시”메뉴도 있습니다.
또한 Firefox에서 PrintPreview에 도달하는 단계를 줄이려면 PrintPreview 확장 기능을 사용해보십시오. 그러면 도구 모음 단추가 만들어집니다.
Chrome 의 경우 해당 확장 의 포트가 있습니다 . Chrome 버전으로 알 수있는 내용에서 ‘인쇄 스타일 표시’를 선택할 수 있습니다.
답변
인쇄 미리보기가 포함되지 않은 테스트 방법을 사용하지 않습니다. 너무 많은 차이점이 있습니다. 배경 이미지가 인쇄에서 전혀 작동하지 않지만 그 중에서 가장 중요한 일반 화면 컨텍스트에 표시됩니다.
Chrome에서는 control+p즉시 인쇄 미리보기로 이동합니다. (메뉴 막대까지 마우스를 올리는 것을 잊지 마십시오). 꽤 쉽습니다.
답변
테스트하는 동안 단순히 화면 스타일을 비활성화하고 인쇄 스타일 시트에 대해 미디어 유형을 “스크린”으로 변경할 수 있습니다. 실제 인쇄 미리보기 (페이지 나누기, 문서 너비 등)를 사용하는 것과 정확히 같지는 않지만 여전히 좋은 아이디어입니다.
답변
FF 로 나를 위해 간단합니다 ( @screen부품이 없거나 유사한 1 ) .
- CSS 내용의 끝에 부분을 넣어
@media print { ... - 랩퍼 선언 만 주석 처리 하십시오.
/*@media print {*/ ... /*}*/- 따라서 인쇄물을 스타일에 적용하면 해당하는 경우 즉시 덮어 씁니다.
- ( LiveReload 를 사용 하고 있으므로 변경 사항 을 저장 한 직후 브라우저 페이지가 새로 고쳐집니다 )
- ( 그렇지 않으면 LiveReload를 사용하지 않는 경우)를 눌러
CTRL+R페이지를 다시로드하십시오. - 이제 인쇄 미리보기가 필요하지 않은 일반적인 인쇄 CSS 조정 (글꼴 스타일, 글꼴 크기, 간격, 색상)을 이미 많이 수행 할 수 있습니다.
- 을 눌러
ALT+F+V인쇄 미리보기를 열고ALT+W다시 닫습니다.
1 : 테스트 된 미디어에 따라 주석 처리 / 주석 처리가없는 것이 큰 문제가되지 않을 수 있습니다
답변
이 다른 게시물 ( 인쇄 미리보기 모드에서 Chrome의 요소 검사기 사용? )에 설명 된대로 크롬을 사용하여 인쇄 스타일 시트를 에뮬레이션 할 수 있습니다. 이것은 인쇄 대화 상자가 나타날 때 추측하지 않고 관리자를 사용하여 스타일이 어디에서 왔는지 확인할 수 있기 때문에 좋습니다.
Chrome Element Inspector의 오른쪽 하단에있는 톱니 바퀴 아이콘을 클릭하여 재정의 설정 대화 상자에 액세스합니다. 그런 다음 대상 미디어 유형으로 인쇄를 선택하십시오.
대박!
