使用 HTML 和 CSS 打印标签。如何根据标签的高度和宽度调整标签和容器的大小？答案

【问题标题】：Label printing with HTML and CSS. How to resize label and containers according to label height and width?使用 HTML 和 CSS 打印标签。如何根据标签的高度和宽度调整标签和容器的大小？
【发布时间】：2021-03-30 22:42:53
【问题描述】：

以下是我为 5 厘米 x 2.2 厘米的标签设计的代码。打印完美。

我还需要能够打印其他尺寸，自动调整字体和容器的大小。我要更改的唯一 2 个变量是标签大小和标签宽度，如上所述。其余的需要与他们建立关系。

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>ENDEVOUR</title>
  <link href="labels.css" rel="stylesheet" type="text/css">
  <style>
    body {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    width: 5.000000cm;
    height: 2.200000cm;
        }
    .label{
    margin: 0;
    padding-top: 10.000000px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10.000000px;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    width: 4.800000cm;
    height: 1.900000cm;

    font-family: Century Gothic;
    font-size: 9.000000px;
    font-weight: bold;

    float: left;

    text-align: Left;
    overflow: hidden;
        }
    .page-break  {
        clear: left;
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        display:block;
        page-break-after:always;
        }
    .pharmacyBlock {
        display:block;
    }
    .pharmacyLogo {
        margin-left: 5.000000px;
        display: inline-block;
        width: 15.000000px;
        height: 15.000000px;
    }
    .pharmacyname  {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;

        display:inline-block;
        font-family: Century Gothic;
        font-size: 12.000000px;
        line-height: 5px;
        }
    .descriptionvalue  {
        margin: 0;
        margin-left: 0%;
        margin-top: descriptionMargin%;
        padding: 0;
        border: 0;
        outline: 0;

        display:block;
        font-family: Century Gothic;
        font-size: 9.000000px;
        text-overflow: ellipsis;
        white-space: pre;
        line-height: 5px;
        }
    .pricevalue  {
        margin: 0;
        margin-left: 20.000000%;
        margin-top: 5.000000%;
        padding: 0;
        border: 0;
        outline: 0;

        display:block;
        font-family: Century Gothic;
        font-size: 12.000000px;
        line-height: 5px;
        }
    .origindate  {
        margin: 0;
        margin-left: 0%;
        margin-top: 5.000000%;
        padding: 0;
        border: 0;
        outline: 0;

        display:block;
        font-family: Century Gothic;
        font-size: 9.000000px;
        line-height: 5px;
        }

  </style>

</head>

<body onload="printFunction();">
<div class="label">
<span class="pharmacyBlock">
<p class="pharmacyname">STORE PHARMACY</p>
<img src="https://i.imgur.com/L1Zfjan.jpeg" class="pharmacyLogo" />
</span>
<p class="descriptionvalue">FLUANXOL 0.5MG X 60 TABS                                     </p>
<p class="pricevalue">&euro;5.78</p>
<p class="origindate">AGENT310321 VAT: 0% Inv: 487021</p>
</div>
<div class="page-break"></div><div class="label">
<span class="pharmacyBlock">
<p class="pharmacyname">STORE PHARMACY</p>
<img src="https://i.imgur.com/L1Zfjan.jpeg" class="pharmacyLogo" />
</span>
<p class="descriptionvalue">RODOGYL X 20 TABS           *                                </p>
<p class="pricevalue">&euro;6.49</p>
<p class="origindate">AGENT310321 VAT: 0% Inv: 487021</p>
</div>
<div class="page-break"></div><div class="label">
<span class="pharmacyBlock">
<p class="pharmacyname">STORE PHARMACY</p>
<img src="https://i.imgur.com/L1Zfjan.jpeg" class="pharmacyLogo" />
</span>
<p class="descriptionvalue">MATERNA DHA 24X34G (NESTLE)                                  </p>
<p class="pricevalue">&euro;13.49</p>
<p class="origindate">AGENT310321 VAT: 0% Inv: 487021</p>
</div>
<div class="page-break"></div>

<script>
function printFunction() {
  var r = confirm("Do you want to open the print dialouge now?");
  if (r == true) {
    window.print();;
  } else {
    // closes alert
  }
}
</script>

</body>

</html>

谁能帮我想出一些我可以用于任何标签尺寸的东西？标签是用来打印的，因此必须保持其形状。

【问题讨论】：

标签： html css printing label autosizing

【解决方案1】：

可以通过媒体查询来回答您的问题，这是一种流行的传递不同风格的技术取决于屏幕的大小、方向屏幕等等。

这里是更多信息的链接：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

可能会设置一些想法：

@media screen and (max-width: 600px) and (min-width: 200px) {
  #idOfdiv {
    font-size:15px;
  }

@media screen and (max-width: 800px) and (min-width: 601px) {
  #idOfdiv {
    font-size:20px;
  }
}

但在你的评论中思考

我需要有标签，而不是改变尺寸（在这种情况下是 5cm 2.2cm），并且里面的所有 div 都会调整字体大小以完全适合尺寸。如果尺寸增加，字体也会增加，依此类推。我应该只能改变两个变量，其余的应该是自动的。 – 约翰·阿吉乌斯 3 月 31 日 6:15

是否需要使用 Javascript 来调整前端字体大小取决于容器的宽度，因为它取决于断点。

但在此之前，请参阅此答案： Font scaling based on width of container

可能会解决问题...

【讨论】：

我需要有标签，而不是更改尺寸（在本例中为 5cm x 2.2cm），并且内部的所有 div 都会调整字体大小以完全适合尺寸。如果尺寸增加，字体也会增加，依此类推。我应该只能更改两个变量，其余的应该是自动的。