4

我正在创建一个博客（通过 tumblr），我希望我的页面标题能够自动缩放以水平填充可用空间，并且可能同时将内容向下推一点。

（按比例，我的意思是改变字体大小，也许还有字间距）

页面标题都是四个字长，所以可能会有 16 到 40 个字符。

我对 html 知之甚少，我将非常感谢任何可以帮助我的人。干杯!

4

1 回答 1

2

注意：这不是一个纯粹的 html/css 解决方案。我认为仅使用 html 和 css 是不可能的，所以它大量使用了 javascript。我也使用 jquery 来完成它，但它可以很容易地用任何 javascript 库复制。（我使用 javascript 库主要有两个原因：第一个是这些库带来的跨浏览器兼容性，以及精心设计的快捷方式/实用程序功能，第二个原因是这些库有大量插件处理大多数情况或为网站带来免费的眼睛糖果）

嗨，我没有找到任何“开箱即用”的解决方案，但这是我在 iphone 开发中一直喜欢的东西，我错过了 web 开发，所以我决定试一试

这是我的解决方案，它并不完美，但它有点工作：p。我坚持这不会太难，但我花了一些时间，反正我想我有一天可能会使用它......或者我在这个过程中获得的一些知识......

它从这个问题中得到灵感，他们描述了一个基于循环的解决方案，他们增加/减少文本大小直到它适合。但我对每个文本调整大小的循环并不满意，我确信它可以直接计算而不是试错！

它也从这里获得了窗口调整大小处理的灵感。

现在停止聊天，这里是代码：

<script type="text/javascript">
    var timer_is_on=0;
    jQuery.event.add(window, "load", loadFrame);
    jQuery.event.add(window, "resize", resizeFrame);

    function loadFrame() {
        $(".sc_container").each(function(){
            var $sc = $(this).children(".sc")
            $sc[0].orig_width=$sc.width();
            //console.log("saving width : "+$sc[0].orig_width+" for "+$sc[0])
        });

        resizeFrame() 
    }

    function resizeFrame() 
    {
        $(".sc_container").each(function(){
            var $sc = $(this).children(".sc")
            var wc = $(this).width();
            var scale = 0
            if (wc > $sc[0].orig_width) {
                scale = wc / $sc[0].orig_width; 
            } else {
                scale = - $sc[0].orig_width / wc;   
            }

            //console.log("applying scale : "+scale+" for "+$sc[0])
            $sc.css("font-size",scale+"em")

        });
    }

</script>
</head>
<body>
<div id="container">
    <div class="sc_container">
        <div class='sc'>SOME SUPER TITLE !</div>
    </div>
    <div class="sc_container">
        <div class='sc'>ANOTHER ONE !</div>
    </div>
    <div class="sc_container">
        <div class='sc'>AND A THIRD LOOOOOOOOOOOOOONG ONE :) !</div>
    </div>
    <div> And some normal content</div>
</div>

这是一个测试页面

它不是很健壮..当窗口小于 400 px 宽时它不能很好地工作，我只在 mac 上的 safari、firefox、chrome 上测试过它。

一个有点棘手的部分是我希望它可以处理多个文本，因此$(".sc_container").each在所有具有 css 类“.sc_container”的对象上运行的循环。

最后一个技巧是我使用 css 'em' 单位的力量：例如 '3em' 表示原始文本大小的 3 倍，所以在这里我可以使用它从原始文本大小缩放到所需的文本大小..这就是为什么我将原始文本宽度保存在 DOM 对象本身上：$sc[0].orig_width=$sc.width();并在稍后调整大小时将其重新用于计算，否则在多次调整大小后它会变得混乱。

你们怎么看？

于 2011-04-24T00:15:26.147 回答