What css screen width does the browser use when printing a webpage

When no @media print is specified in the CSS file for a webpage, what width does the browser use to determine which CSS applies to the printed page?

When we write our page code, we use a laptop first design flow as below. And yes I know many folks push mobile-first but our clientèle tend to use their work computer and a tablet at home, not glued to their phones.

Main css for the page for everything wider than 1024 and not vertical

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* tablet modifications */
}

@media (max-width: 767px) {
  /* phone modification */
}

As I understand it, we could also write the media queries specifying 'screen' as well with the same results on someone' electronic device.

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { }

When someone decides to print a page, does the browser only use the main css? Or does it consider a page to be narrower than the 1024px mentioned and use the tablet mods? Or does it print based on the device you are viewing the website with, resulting in a bunch of pages with a narrow column down the center if you connect your phone to a printer via bluetooth or wifi?

This is more a question for learning, not a problem being solved.

Solution

See w3.org/TR/css-values-3/#absolute-lengths whicih says that one CSS pixel be equivalent to 1/96 inch. And remember that some printers have margin settings so you don't get the full paper width printed on (some can't physically print to the edges whatever you set).

Try this simple snippet and go to print it. Try different printer paper sizes and orientations and see what you get in the previews.

<style>
/*Main css for the page for everything wider than 1024 [this bit not correct - consider e.g. A3 in portrait - and not vertical]}*/
div {
  --message: 'This page appears to be wider than 1024px';
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* tablet modifications */
  div {
  --message: 'This page appears to have a width between 768px and 1024px and be in portrait orientation';
  }
}

@media (max-width: 767px) {
  /* phone modification */
  div {
  --message: 'This page appears to have a maximum width of 767px';
  }
}
div::before {
  content: var(--message);
}
</style>
<div></div>

<style>
  /*Main css for the page for everything wider than 1024 [this bit not correct - consider e.g. A3 in portrait - and not vertical]}*/
  div {
    --message: 'This page appears to be wider than 1024px';
  }

  @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    /* tablet modifications */
    div {
      --message: 'This page appears to have a width between 768px and 1024px and be in portrait orientation';
    }
  }

  @media (max-width: 767px) {

    /* phone modification */
    div {
      --message: 'This page appears to have a maximum width of 767px';
    }
  }

  div::before {
    content: var(--message);
  }
</style>
<div></div>