js字体自适应

最新推荐文章于 2025-02-20 22:41:11 发布

self_defining

最新推荐文章于 2025-02-20 22:41:11 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：字体自适应 JavaScript

本文链接：https://blog.youkuaiyun.com/h_tinkinginjava/article/details/77702783

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现字体大小随容器宽度自适应的方法。通过获取特定元素的宽度，并根据该宽度设置字体大小，使得字体能根据屏幕大小变化而调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

会根据ul的变化，div也会发生变化，所以里面的字体也会随着发生变化，具体的实现方法如下：

javascript方法：

$(function(){
	var ulW=$(".pt-fontC").width();
	size = ulW / 20;
	 $(".pt-fontC li .pt-cont div:first-child").css("font-size",size + "px");
});

对应的html页面：

<div class="right-box" >
        <div class="cont-box" style="height:370px;">
            <p>各账本收支(单位：￥)</p>
            <div style="text-align: center">
            <br/>
            	<div style="height:80px;text-align:right;" >
                      <input class="btn-query" id="btn_in" type="button" value="收入" onclick="clickin();"style=";"/>    
            		<input class="btn-query" id="btn_out" type="button" value="支出" onclick="clickout();"/>         
                 </div>
                <ul class="pt-fontC" >
                    <li>
                        <div class="pt-cont"  id="div11">
                            <div class="fon1" id="syb" >2075</div>
                            <div class="pt-title">苏研币 </div>
                        </div>
                    </li>
                    <li>
                        <div class="pt-cont" >
                            <div class="fon2" id="yfb" >3354</div>
                            <div class="pt-title">研发币</div>
                        </div>
                    </li>
                    <li>
                        <div class="pt-cont">
                            <div class="fon3" id="xzj">1245</div>
                            <div class="pt-title">现金币</div>
                        </div>
                    </li>                  
                </ul>
              
                <div style="height:100px;text-align:center; width:10px;"></div>
                
            </div>
        </div>
    </div>

哈哈哈，折磨了我多日的一个小问题终于解决啦，谢谢莉妹，莉妹真厉害。

补充一个js：

当屏幕的分辨率发生变化时，页面会自动的刷新;

//自动刷新页面
$(window).resize(function(){
    location.reload();
});