如果打印时选择 A5 尺寸的纸张，是否更改 CSS？答案

【问题标题】：Change CSS if A5 size paper is chosen when printing?如果打印时选择 A5 尺寸的纸张，是否更改 CSS？
【发布时间】：2020-12-22 22:26:19
【问题描述】：

我正在创建一个网站，可以选择打印用户创建的任何内容。 As of now I can make the print-out look really nice (for print at least) when A4 paper is chosen, but when A5 is chosen, it gets a bit messy.

那么，我能否以某种方式为 A4 纸和 A3 纸使用一些不同的 CSS，或者这只是玩打印时的游戏名称？

【问题讨论】：

标签： html css printing

【解决方案1】：

您可以尝试以下媒体查询，但我不确定支持的范围有多大：

/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
  @page {
     margin: 3cm;
  }
 }

/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
  @page {
  margin: 1in;
  }
}

function paperSelect(){

var elems = document.body.getElementsByTagName("*");

 if (event.target.id == 'a3'){
    for(let i = 0; i < elems.length; i++){
       elems[i].classList.add("mystyle");    
    }
 }else{
    for(let i = 0; i < elems.length; i++){
       elems[i].classList.remove("mystyle");    
    } 
 }

}

li{
   display:block;
}

li.mystyle{
   display:inline;
}

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
A4<input id='a4'  type='radio' name='print' checked onchange='paperSelect()'>or A3
<input id='a3' type='radio' name='print' onchange='paperSelect()'>

解决此问题的一种方法是创建以 A3 CSS 为模型的 A4 CSS，并进行必要的更改，然后添加一个类。然后，您可以为用户提供他们想要使用的纸张的选项并切换课程。

【讨论】：

啊，好吧......所以如果他们在打印菜单中选择不同的纸张尺寸，真的没有什么好的选择吗？
打印菜单位于计算机和打印机之间。它不会影响您的网页。可能可以确定打印设置，但我必须对此进行研究。