恒富网

在网页设计中，经常需要使用一些图标来美化页面。图标的大小一般是固定的，但是有时候我们希望能够根据页面的不同尺寸来改变图标的大小。这时候，我们可以使用jQuery来实现这个功能。

假设我们有一个页面上的图标的类名为“icon”，我们可以使用以下的jQuery代码来设置图标的大小：

$(document).ready(function(){
$(".icon").css("font-size", "20px");
});

以上代码会将所有class为“icon”的元素的字体大小设置为20像素。可以根据需求调整像素值。

如果我们想根据页面宽度来动态设置图标的大小，可以使用以下代码：

$(window).on("resize", function(){
var windowWidth = $(window).width();
var fontSize = windowWidth / 20;
$(".icon").css("font-size", fontSize + "px");
});

以上代码会在页面大小改变时触发resize事件，根据页面的宽度计算出图标应该设置的字体大小并应用到所有class为“icon”的元素上。这样就可以根据页面不同的尺寸来动态调整图标的大小。

需要注意的是，当使用以上代码时，必须保证在CSS中没有为图标设置固定大小，否则会覆盖jQuery设置的大小。