Question

当div的内容太大时，我需要在打印前缩放它们。我在这里遵循了有用的建议并设置了打印样式表。到了打印的时候，我发现我需要更改@media打印查询中的一些css。我没有更改媒体查询中的类，而是找到一个常规的CSS选择器，在屏幕上而不是在打印查询中对div进行更改。是否有一个选择器可用于仅对@media print css进行更改？

此处示例：点击＆＃39;更改比例＆＃39;按钮立即缩放图像。我希望更改的比例仅适用于打印输出。

＆＃13;

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();
  
});

＆＃13;

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;
  }

＆＃13;

<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>

＆＃13;

谢谢，马特

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

如何在@media打印查询中更改css？

1 个答案: