HTML – 我希望我的页面标题能够自动缩放以填充可用空间(水平)

2019年8月3日 261次阅读

我正在创建一个博客(通过tumblr),我希望我的页面标题能够自动缩放以水平填充可用空间,并可能同时将内容缩小一点.

(按比例,我的意思是改变字体大小,也许是字间距)

页面标题长度都是四个字,因此可能有16到40个字符.

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

最佳答案 注意：这不是一个纯粹的html / css解决方案..我认为只用html和css就可以做到这一点所以它强烈地使用了
javascript.此外,我正在使用jquery来做它,但它可以很容易地与任何
JavaScript库一起复制. (我使用javascript库主要有两个原因：第一是这些库带来的跨浏览器兼容性,以及精心设计的快捷方式/实用程序功能,第二个原因是这些库具有大量的插件处理大多数情况或为网站带来免费的眼睛糖果)

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

这是我的解决方案,它并不完美,但有点工作：p.我认为这不会太难,但是我花了一些时间,不管怎样我觉得有一天我可能会用它……或者我在这个过程中获得的一些知识……

它具有this question的灵感,它们描绘了一个基于循环的解决方案,在这个循环中,它们增加/减少文本大小直到它适合.但我不满意每个文本调整大小的循环,我确信它可以直接计算而不是试错！

从here开始,它还具​​有窗口调整大小处理的灵感.

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

<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>

这是一个test page

它不是很强大……当窗口宽度小于400像素时,它不能很好地工作,我只在safari,firefox,chrome上测试它.

一个有点棘手的部分是我希望它能够处理多个文本,因此$(“.sc_container”).每个循环都在css类“.sc_container”的所有对象上运行.

最后一个技巧是我使用了css’em’单元的强大功能：例如’3em’意味着原始文本大小的3倍,所以在这里我可以使用它来从原始文本大小缩放到所需的文本大小.这就是我在DOM对象上保存原始文本宽度的原因：$sc [0] .orig_width = $sc.width();并在稍后调整大小时重新使用它进行计算,否则在多次调整大小后它会被搞砸.

你们怎么看待它？

点赞