【技巧】当屏幕宽度更换时变换调用css

最新推荐文章于 2025-03-08 10:37:52 发布

原创最新推荐文章于 2025-03-08 10:37:52 发布 · 865 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #css

收录于

CSS 同时被 2 个专栏收录

22 篇文章

订阅专栏

HTML

9 篇文章

订阅专栏

本文介绍了一段使用jQuery实现的功能，当浏览器窗口尺寸发生变化时，会根据不同的宽度阈值来更新页面中指定元素的样式类。此方法适用于响应式网页设计中根据不同设备尺寸调整页面布局的需求。

HTML代码如下：

<div class="abc"></div>

JS代码如下：

<script>
    $(function(){
        $(window).resize(function() {
            var ww = $(window).width();
            if( ww > 1000 ){
                $('abc').removeClass('b1').addClass('a1');
            } else if( ww > 600 && ww < 1000 ){
                $('abc').addClass('a1').removeClass('b1')
            }
         });
    })
</script>