Mobile thiết kế đầu tiên và in

Question

Tôi có một trang web di động đầu tiên với các file Bốn CSS:

1. css chính - @media tất cả và (min-width: 240px)
2. thiết bị di động nhỏ - @media tất cả và (min-width: 481px)
3. các thiết bị di động lớn - @media tất cả và (min-width: 769px)
4. Desktop - @media tất cả và (min-width: 981px)

Khi tôi cố gắng để in một cái gì đó từ trang web trong máy tính để bàn, trên bản xem trước bản in, nó thực sự trông giống như phiên bản di động. Ngay cả trong cảnh quan, dường như không đủ pixel để tải chiều rộng tối thiểu 981px. Đó là vấn đề số một.

Vấn đề số được cố định bằng cách thêm từ "thiết bị" vào chiều rộng tối thiểu, nhưng sau đó vấn đề hai, bạn không thể nhìn thấy thiết kế di động trên máy tính để bàn và tôi cần nó hiển thị.

Bất kỳ ý tưởng nào?

Answer 1

Tạo phần @media print.

Answer 2

Bạn phải chỉ làm cho các kích thước corect và phong cách như nêu bạn cũng có thể in các điểm khác nhau như thế này:

@media print and 
     (-o-min-device-pixel-ratio: 5/4), 
     (-webkit-min-device-pixel-ratio: 1.25), 
     (min-resolution: 120dpi) { 

    /* Style adjustments for high resolution devices */ 

} 



@media print { 

}