如何在@media打印查詢中更改CSS？

Question

當div的內容太大時，我需要在打印之前縮放它們。 我在這里遵循了有用的建議，並設置了打印樣式表。 當需要打印時，我發現我需要更改@media打印查詢中的某些CSS。 我沒有在媒體查詢中更改類，而是找到了常規的CSS選擇器，在屏幕上而不是在打印查詢中對div進行了更改。 是否可以使用選擇器僅對@media print css進行更改？

此處的示例：點擊“更改比例”按鈕可立即縮放圖像。 我希望更改的比例僅適用於打印輸出。

 var canvas = document.getElementById("canvas1"); function draw_a() { var context = canvas.getContext("2d"); // // LEVER //plane context.fillStyle = '#aaa'; context.fillRect (25, 90, 2500, 400); } function changeScale() { var scale = .1; console.log("scale:" + scale); $('.myDivToPrint').css({ '-webkit-transform': 'scale(' + scale + ')', '-moz-transform': 'scale(' + scale + ')', '-ms-transform': 'scale(' + scale + ')', '-o-transform': 'scale(' + scale + ')', 'transform': 'scale(' + scale + ')', }); } $(document).ready(function(){ draw_a(); }); 

 div.sizePage { color: #333; } canvas { border: 1px dotted; } .printOnly { display: none; } @media print { html, body { height: 100%; background-color: yellow; } .myDivToPrint { background-color: yellow; top: 0; left: 0; margin: 0; } .no-print, .no-print * { display: none !important; } .printOnly { display: block; } } @media print and (-ms-high-contrast: active) and (-ms-high-contrast: none) { html, body { height: 100%; background-color: pink; } .myDivToPrint { background-color: yellow; /* -moz-transform: rotate(90deg) scale(0.3); -ms-transform: rotate(90deg) scale(0.3); -o-transform: rotate(90deg) scale(0.3); -webkit-transform: rotate(90deg) scale(0.3); transform: rotate(90deg) scale(0.3); /* Standard Property */ position: fixed; top: 0; left: 0; margin: 0; padding: 15px; font-size: 14px; line-height: 18px; position: absolute; display: flex; align-items: center; justify-content: center; /* -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); */ } .no-print, .no-print * { display: none !important; } .printOnly { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="window.print();" class="no-print">Print Canvas</button> <button onclick="changeScale();" class="no-print>">Change Scale</button> <div class="myDivToPrint"> <canvas height="2500px" width="4000px" id="canvas1"></canvas> </div> 

謝謝，馬特

Answer 1

如果我正確理解您的意思。 您想編輯媒體查詢本身。 在這種情況下，這里有一些示例。 jQuery更改媒體查詢寬度值

$('body').append("<style type='text/css'>@media screen and (min-width: 500px) { /*whatever*/ }</style>");

您還可以使用window.MatchMedia（），如下面的示例所示！ https://codepen.io/ravenous/pen/BgGKA

您可以只更新一個現有元素（或創建一個）textContent來包含規則，這將使其在給定上下文中有效。 使用JavaScript或jQuery生成CSS媒體查詢

document.querySelector('style').textContent +=
    "@media screen and (min-width:400px) { div { color: red; }}"

還有一個庫，允許為此目的專門混合使用CSS和jQuery。 http://www.learningjquery.com/2017/03/how-to-use-media-queries-with-jquery