javascript - 在@media print 上更改页面大小时更改css样式

Question

我只想在用户选择特定页面大小时更改此形状的大小。

原方尺寸

.square {
  height: 100px;
  width: 100px;
}

当用户选择纸张尺寸 A4

.square {
   height: 80px;
   width: 80px;
}

当用户选择纸张尺寸时

.square {
   height: 50px;
   width: 50px;
}

这可能吗？

.square {
  height: 100px;
  width: 100px;
  border: 4px solid black;
  background: green;
}

@media print {
  @page {
    size: A4;
    margin: 0;
  }
  .square {
    height: 80px;
    width: 80px;
    border: 4px solid blue;
    background: blue; 
  }
  
  @page {
    size: letter;
    margin: 0;
  }
  .square {
    height: 50px;
    width: 50px;
    border: 4px solid yellow;
    background: yellow; 
  }
}

<div class="square">
</div>

标签： javascripthtmlcss