页面变小时控制span4大小和div下面的所有span的字体大小

原创于 2019-03-09 18:55:17 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

本文介绍了一种响应式布局的实现方式，当页面宽度小于特定阈值时，通过调整.span4元素的宽度和所有span元素的字体大小，确保页面在小屏幕上的良好显示效果。该方法使用jQuery遍历并修改DOM元素的样式。

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

//页面变小时控制span4大小和div下面的所有span的字体大小
      if($("#Info2").width()<149){
          $(".span4").css("width","11%")
          $(".span4").css("margin-right", "9px");
          var sapn = $(".span4");
          $.each(sapn,function(i,v){
              $.each($(this).find("span"),function(i,v){
                  var ini_font = parseInt($(this).css("font-size"));
                  if(ini_font>20){
                      $(this).css("font-size",ini_font-5+"px");
                  }else if(20>ini_font>15){
                      $(this).css("font-size",ini_font-3+"px");
                  }else{
                      $(this).css("font-size",ini_font-2+"px");
                  }
              })
              console.log( $(this).find("span")[0].style);
          })
      };