• css响应有media,js响应有这种


    比如,我不想在移动端执行某js特效可以参考
    (function(doc, win) { var screenWidth = 0, size = 'M', root = doc.documentElement; if (window.screen && screen.width) { screenWidth = screen.width; if (screenWidth > 1920) { // 超大屏,例如iMac size = 'L'; } else if (screenWidth < 480) { // 小屏,如手机 size = 'S'; } } // 标记CSS root.className = size; // 标记JS win.SIZE = size; })(document, window);


    目前做的实例运用中
    <script>
          (function(doc, win) {
        var screenWidth = 0, size = 'M', root = doc.documentElement;
        if (window.screen && screen.width) {
            screenWidth = screen.width;
            if (screenWidth > 768) {
              //悬浮 效果就是滚动大1的时候,延迟2.5s执行js效果且只让这效果执行一次
                  $(function(){
                      function haha(){
                      var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
                        if(scrollTop >1){              
                                $('.lis2').show(1000);                
                                }                     
                      }
                      var tur = true;
                      window.onscroll = function(){
                          if(tur){ setTimeout(haha,2500); tur = false; }
                      }
                      
                    })
                   
                 $(function(){
                      $('.xfbut').click(function(){
                        $('.lis2').hide();
                      })
                    })
            } else if (screenWidth < 767) {
                // 小屏,如手机
                size = 'S';
            }
        }
        // 标记CSS
        root.className = size;
        // 标记JS
        win.SIZE = size;        
    })(document, window);
        </script>
    这个可以完满解决在767尺寸之外执行那段js特效
    具体的参考http://www.zhangxinxu.com/wordpress/2016/06/pseudo-response-layout-base-on-screen-width/comment-page-1/#comment-319478
  • 相关阅读:
    springsecurity 注解开发
    springsecurity 授权
    【ElasticSearch】集群搭建
    【CentOS7.9】防火墙配置使用
    【CentOS7.9】创建及挂载共享文件夹
    查看Linux发行版
    【Spring Cloud】spring-cloud2020和spring-cloud-alibaba2021问题记录
    【Spring Cloud】spring.factories
    三剑客-----grep
    git安装
  • 原文地址:https://www.cnblogs.com/lsc-boke/p/6132760.html
Copyright © 2020-2023  润新知