Question

我一直在浏览旧帖子，尝试了一些尝试，但似乎没有任何效果。当设备宽度小于480px时，我试图使h1，h2和h3的字体大小全部更改。

我知道使用CSS媒体查询是一种更好的方法，但是对于我正在研究的项目，这不是一个选择。

提前感谢：）

这是我在JSFiddle中的代码

$(document).ready(function(){
    if($(window).width() < 480) { 
         $('h1').css('font-size','10px');
         $('h2').css('font-size','8px');
         $('h3').css('font-size','6px');
    }
});

h1 {
	font-size:50px;
    }
    h2 {
    	font-size: 40px;
    }
    h3{
    	font-size: 35px;
    }

<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>

Answer 1

$(document).ready(function(){
    if($(window).width() < 480) { 
         $('h1').css('font-size','10px');
         $('h2').css('font-size','8px');
         $('h3').css('font-size','6px');
         $('h4').css('font-size','4px');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>hi</h1>
<h2>hi</h2>
<h3>hi</h3>
<h4>hi</h4>

使用JavaScript / JQuery更改移动设备的字体大小

1 个答案: