您可以尝试以下媒体查询,但我不确定支持范围有多广:
/* 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,并进行必要的更改,然后添加一个类。然后,您可以给用户一个选项,让他们选择要使用哪篇论文,并切换课程。
