2013-04-19 36 views
16

tôi muốn tìm hiểu làm thế nào tôi có thể kiểm tra in css của tôi giống như khi tôi kiểm tra các yếu tố của tôi với css bình thường và tôi nhìn khắp nơi cho các plugin và các công cụ như vậyXem print css trong trình duyệt

Giống như khi bạn xem trước in trong chrome nhưng nơi bạn có thể kiểm tra các yếu tố

enter image description here

@media print { 
    p{color:red;} 
    ..... my css 
} 
.sharebar { 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 195; 
    font-size: 12px; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 400; 
    text-transform: uppercase; 
} 
+0

Làm thế nào điều này có thể trùng lặp khi "hai mặt" khác chỉ được chrome định hướng, đây là câu hỏi không phải là câu hỏi cụ thể của trình duyệt –

+0

hơn nữa, tìm kiếm từ khóa tôi đã sử dụng sẽ không bao giờ chọn câu hỏi khác xuất hiện. Nếu nó không phải là tìm kiếm được, nó không nên được đánh dấu là trùng lặp. Một số câu trả lời từ những thời đại đen tối bị chôn vùi trong những lời than vãn của sự tối tăm không được tính là 'câu trả lời trùng lặp' –

Trả lời

30

Chrome có chức năng này ra khỏi hộp trong DevTools - xem CSS Media Type Emulation.

+0

bạn không thể kiểm tra phần tử trong màn hình PrintPreview ... –

+0

lẽ Chrome đã thay đổi kể từ câu trả lời này đã được đăng, nhưng tôi không thấy bất cứ điều gì trong đó cho phép của bạn xem trước các loại phương tiện in. Tất cả những gì tôi thấy là các cài đặt liên quan đến thiết bị di động. – Knyri

+2

@Knyri có vẻ như Chrome đã thay đổi rất nhiều kể từ câu trả lời này. Một câu trả lời tốt hơn nhiều mà có giải pháp cho tất cả các phiên bản của Chrome là http://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode – andyb

7

Nếu bạn đang sử dụng Firefox, bạn có thể sử dụng thanh công cụ Web Developer cho việc này (và nhiều điều tốt đẹp khác!)

http://chrispederick.com/work/web-developer/

Sau khi cài đặt thanh công cụ, các tùy chọn có thể được tìm thấy dưới CSS -> Display Styles By Media Type -> Display In Styles.

+0

nó không hoạt động. Tôi đã làm những bước cuối cùng mà bạn đã đề cập. Cảm ơn – Santanu

8

Làm điều này trong chrome:

  1. Công cụ Mở Developer
  2. Nhấp vào "Tùy chỉnh và DevTools kiểm soát" nút menu hamburger.
  3. Chọn Công cụ khác> Cài đặt hiển thị.
  4. Chọn hộp kiểm "Thi đua CSS Media" tại tab Hiển thị và chọn loại Phương tiện in.

Các bước rất chi tiết có thể được tìm thấy here.

Các vấn đề liên quan