@page: how to change size of page when printing, A4, portrait, landscape

The @page CSS at-rule is used to modify some CSS properties when printing a document.

@Page

@page <page-selector-list> {
  <page-body>
}

/* example */
@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}

size

Specifies the target size and orientation of the page box's containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet.

/* Keyword values for scalable size */
size: auto;
size: portrait;
size: landscape;

/* <length> values */
/* 1 value: height = width */
size: 6in;

/* 2 values: width then height */
size: 4in 6in;

/* Keyword values for absolute size */
size: A4;
size: B5;
size: JIS-B4;
size: letter;

/* Mixing size and orientation */
size: A4 portrait;

mix media print && size

@media print {
  @page {
    size: 50mm 150mm;
  }
}