比如,我不想在移动端执行某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

css响应有media,js响应有这种的更多相关文章

  1. media screen 响应式布局(知识点)

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  2. 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

    有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...

  3. baguetteBox.js响应式画廊插件(纯JS)

    baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...

  4. CSS 媒体查询@media

    1. 概述 1.1 定义 @media可以针对不同的屏幕尺寸(媒体类型)设置不同的样式,在响应式页面中,@media非常有用.重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面. 1. ...

  5. css 的弱化与 js 的强化(转)

    web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势,而在这个过程中,其实还有另一种趋 ...

  6. 前端进阶(12) - css 的弱化与 js 的强化

    css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势, ...

  7. Chocolat.js – 响应式的 jQuery Lightbox 插件

    Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...

  8. Dense.js - 响应式的视网膜(Rtina)图像支持

    Dense 是一款 jQuery 插件,它提供一个简单的方法为设备提供精密像素比的图像,为你的网站带来视网膜支持,清除模糊,图像更清晰.通过简单地包括 jQuery 插件的页面上,就能实现响应式的视网 ...

  9. ImageLightbox.js – 响应式的图片 Lightbox 插件

    ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...

随机推荐

  1. QGC 支付宝无法异步通知及异步通知常见问题注意事项

    支付宝异步通知参数(notify_url)路径常见问题注意事项: 1.不能是内网或者局域网地址,必须是外网可以访问的.否则无法调用!! 2.地址不能有session拦截,支付宝主动发送,所有sessi ...

  2. CentOS 6.5下配置iSCSI网络存储

    一.简介 iSCSI(internet SCSI)技术由IBM公司研究开发,是一个供硬件设备使用的.可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行 SCSI协议,使其能 ...

  3. 技术|程序员必须要学会Google搜索技巧

    程序员必须要学会Google搜索技巧 摘要: 因为Google在我天朝被墙,学FQ请通过Bing进行搜索如何FQGoogle搜索技巧我曾经多次劝我的另一个朋友花10分钟学习一下Google通配符的使用 ...

  4. Maven手动下载jar

    首先,手动下载的jar一定要是官网上的哦.http://mvnrepository.com/ 在下载之前要在pom.xml里按照官网的格式添加节点,这步一定不能省. 然后迅雷下载jar到本地硬盘. 开 ...

  5. hdu3294 girl‘s research

    题目大意:有多组数据,每组数据给出一个字符和一个字符串.该字符将变成’a‘,表示字符串中的所有该字符将变成’a‘,同时其他字符也将做相同的偏移.具体来说,如果该字符为’b‘,表示字符串中的’b‘都将变 ...

  6. mysql:忘记root密码

    1:修改/etc/my.cnf 2:重启服务 3:进入mysql 4:修改密码 5:刷新权限 注意:修改完成后,别忘了修改/etc/my.cnf,删除skip-grant-tables,否则重启服务后 ...

  7. Redis应用配置项说明

    近期整理了下项目中Redis配置参数,以便学习备用~ #指定内存大小,格式为1k 1GB 1M,单位不区分大小写 # 1k  => 1000 bytes # 1kb => 1024 byt ...

  8. es6 const

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. sysbench压力测试工具简介和使用(二)

    sysbench压力测试工具使用: 2.1    测试数据库服务器的硬件配置信息如下: CPU:      24核心线程数,Intel(R) Xeon(R) CPU E5-2620 0 @ 2.00G ...

  10. 转ASP.NET1.1请求队列限制

    在教务web的选课的维护中,经常面临asp.net1.1报错,在客户端跳转到用户自定义页面,在服务器端可以看到如下错误信息: “/”应用程序中的服务器错误. 服务器太忙 说明: 执行当前 Web 请求 ...