jquery - 使用 Html、CSS 和 JQuery 自动调整出发板的大小

标签 jquery css xhtml

我必须在工作中开发一个自动缩放到达和离开板。

我创建了一个基于百分比的列宽表格(并且整个表格的宽度为 100%),这很容易开始。

目前,我有一小段 JQuery 可以让我更改文本的比例,但这只是为了证明这个概念。

我真的希望能够根据可用的屏幕宽度和高度自动缩放字体和表格单元格的大小。我确实知道每个列单元格允许的最大字符串长度,因此我可以根据一些计算自动设置 em/px 大小。

但是,我对从哪里开始有点困惑。我现在正在积极开发这个,但我最初的想法是:

scale = maxstringwidth_inpx/currentcellwidth_inpx

我会通过查找表和屏幕上大小为 1em 的字符的字体规范来计算 maxstringwidth。

所有单元格都分配了屏幕百分比,因此我应该能够直接读取它们。

然后我就可以设置字体大小了,即:

$("body").css("font-size", currentfontsize_px * scale);

这听起来可行吗?它还提出了有关每个单元格中每个字符串上方和下方填充的问题,但我确信我也可以在那里做一些类似的事情。

为了限定我卡住的地方:

  1. 有没有这方面的例子 野外的东西(我不能 找到任何)
  2. 我的方法是否有 陷阱?
  3. 你以前做过吗 并且可以分享智慧/技术?
  4. 我是不是搬起石头砸自己的脚 已经并且应该考虑 不同的方法?

我在 PM 中提到过使用 Flash 作为自动缩放文本的方法,因为我们可以在 ActionScript 中执行大量字体指标。但是,我才刚刚开始使用 .NET 闪存 IDE,因此我仅限于将其作为开发平台。

感谢您提供任何提示、示例和建议!

西蒙

最佳答案

对于这类事情,CSS 和 HTML 可能非常挑剔,尤其是因为不同计算机上的字体大小可能大不相同。例如,如果您使用的是 Verdana 字体。这是一种很常见的字体。不幸的是,Mac、Windows 和 Linux 呈现它的方式略有不同。确实没有办法保证“漂亮”(非等宽)字体的宽度/高度,除非应用程序将在非常严格控制的环境中使用。

我通常不支持使用 Flash,但是,如果可以的话,这确实是保证某些东西看起来符合预期的唯一方法,因为您可以嵌入字体,而且正如您提到的那样,有更多的控制权Flash 中的排版比 CSS 中的多。您将在 CSS 和 jQuery 中进行一些相当繁重的开发以实现相同的效果——即便如此,您仍然会在浏览器和操作系统之间遇到困难。

但是,如果您决定在 CSS/jQuery/HTML 中执行此操作,请确保在任何地方都使用 ems——没有像素。

祝你好运,让我们知道你最终决定做什么。

关于jquery - 使用 Html、CSS 和 JQuery 自动调整出发板的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/710570/

相关文章:

jQuery - 不在正文中选择器

xhtml - 重新渲染特定行富:dataTable

html - dropbox.com 的多文件上传功能如何运作?

javascript - 检查google recaptcha是否被选中或已被填充

javascript - 在 Jquery/javascript 的控制台中理解 "slice"

javascript - 使用 php 和 javascript 动态鼠标悬停图像

javascript - JQuery-Bootstrap-Expanding-Vertical-Menu 重叠 Bootstrap 网格系统

css - 垂直居中旋转文本

Javascript 可以将背景颜色更改为某些 <div>

css - 覆盖 CSS 样式