如何更改@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 change media query width value

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

您还可以使用window.MatchMedia（）作为显示在下面的示例中！ https://codepen.io/ravenous/pen/BgGKA

您可以更新现有的元素（或创建一个）textContent来包含规则，这将使其在给定的上下文中生效。 Generating CSS media queries with javascript or jQuery

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