Question

我正在尝试创建一个可调整大小的html页面，模仿java applet时钟布局，我不确定我是否正在以正确的方式接近它。下面这个3时钟图片就是我现在想要创建的。目前我使用div，margin，padding来使用css布置1个时钟，但由于每行的字体大小都不同，我使用vmin字体来处理自动调整大小;但结果喜忧参半。我正在网上寻找一个教程或示例来解决如何解决如何解决这个问题，因为这些示例正在调整整个字体大小相同的文本段落或图像。

有没有人知道解决此类问题的教程网站或示例？也许我应该使用canvas或其他东西而不是div标签。感谢。

这是我的1个时钟页面（减去所有css的东西）：

<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="description" content="AOS/LOS Clock" />
    <title>AOS/LOS Clock</title>
    <link rel="stylesheet" type="text/css" href="css/mc_style.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type=\"text/javascript\" src=\"js/mc_clocks.js?color=00ff00&file=input/aos_times_json;\"></script>
    <script type="text/javascript" src="js/mc_engine.js"></script>
  </head>

  <body id="body">
    <div id="wrapper">
      <div id="clockAOS" class="clock missionColor"></div>
      <div class="title missionColor"><span>Acquisition of Signal</span></div>
      <div id="relay" class="siteTdrs"></div>
      <div id="clockLOS" class="clock missionColor"></div>
      <div class="title missionColor"><span>Loss of Signal</span></div>
    </div>
    <p id="Msgs"></p>
  </body>
</html>

Answer 1

我建议您查看bootstrap以在页面上布置元素。您可以轻松创建一个简单的布局，它会响应。

就字体大小而言，无法在所有浏览器和设备上显示相同的页面。即使使用相当普通标准的像素，也会在视网膜显示器上产生不同的结果。 Read this了解有关字体大小调整的更多信息。

Answer 2

我重读了vs字体描述并重新编写了我的css表。这会调整字体的大小，但是即使我使用相同的终端屏幕，左边的负边距也不会在linux盒子上与PC相同。然而，它比以前更好。

SELECT c.user, COUNT(DISTINCT c.user) 
FROM mytable AS c
  JOIN (SELECT id_beneficiario, mes
        FROM mytable
        WHERE codigo_atc REGEXP 'C01BD01|N06AA09|J01FA10|J01MA02|J01FA09|N05AH02|L01XE06|R06AA02|A03FA03|
        L04AA27|J02AC01|N06AB03|C03CA01|N05AD01|C03AA03|J02AB02|J01MA12|N05AN01|J01XD01|J05AE04|L01XE08|
        N05AH03|N05AH04|N05AX08|J05AE03|J05AE01|C07AA07|L04AD02|M03BX02|N06AX05|J01EE03') AS d
ON c.user = d.user AND c.mes = d.mes
WHERE (c.codigo_atc REGEXP 'C01BD01|N06AA09|J01FA10|J01MA02|J01FA09|N05AH02|L01XE06|R06AA02|A03FA03|
        L04AA27|J02AC01|N06AB03|C03CA01|N05AD01|C03AA03|J02AB02|J01MA12|N05AN01|J01XD01|J05AE04|L01XE08|
        N05AH03|N05AH04|N05AX08|J05AE03|J05AE01|C07AA07|L04AD02|M03BX02|N06AX05|J01EE03')
GROUP BY c.user;

使用html

2 个答案: