如何使用桌面媒體查詢進行打印？

Question

我試圖在頁面上添加一些打印功能，但是在打印時好像在移動時一樣打印時出現問題。 我該如何做，以便當有人點擊打印時可以打印桌面版本？

 $('.print-btn').click(function(e) { window.print(); }); 

 .visible-desktop { display:none; } @media only screen and (min-width:768px) { .visible-desktop { display:block; } .visible-mobile { display:none; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="visible-desktop">Viewing from desktop</div> <div class="visible-mobile">Viewing from mobile</div> </div> <a class="print-btn" href="#">Pring</a> 

Answer 1

only screen

這不包括打印。 如果要包括打印件，請不要寫。

Answer 2

您可以在樣式表的底部添加@media print規則：

@media print {
  .visible-desktop {
    display:block;
  }
  .visible-mobile {
    display:none;
  }
}

Answer 3

您應該選擇一種狀態（可能是桌面狀態），並將其移到媒體查詢之外，使其成為“默認”狀態。

其他狀態應覆蓋媒體查詢中默認狀態的屬性。