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
css响应有media,js响应有这种的更多相关文章
- media screen 响应式布局(知识点)
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
- 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...
- baguetteBox.js响应式画廊插件(纯JS)
baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...
- CSS 媒体查询@media
1. 概述 1.1 定义 @media可以针对不同的屏幕尺寸(媒体类型)设置不同的样式,在响应式页面中,@media非常有用.重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面. 1. ...
- css 的弱化与 js 的强化(转)
web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势,而在这个过程中,其实还有另一种趋 ...
- 前端进阶(12) - css 的弱化与 js 的强化
css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势, ...
- Chocolat.js – 响应式的 jQuery Lightbox 插件
Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...
- Dense.js - 响应式的视网膜(Rtina)图像支持
Dense 是一款 jQuery 插件,它提供一个简单的方法为设备提供精密像素比的图像,为你的网站带来视网膜支持,清除模糊,图像更清晰.通过简单地包括 jQuery 插件的页面上,就能实现响应式的视网 ...
- ImageLightbox.js – 响应式的图片 Lightbox 插件
ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...
随机推荐
- coffeeScript中类的多态[学习篇]
类的一大应用就是多态.多态是一个面向对象编程的高级术语----“一个东西可编程很多不同的东西,但不是任何东西”.[引自coffeescript深入浅出] class Shape constructor ...
- excel 导入数据库 / SSIS 中 excel data source --64位excel 版本不支持-- solution
当本地安装的excel(2013版) 是64-bit时:出现的以下两种错误 解决: 1. excel 导入数据库 , 如果文件是2007则会出现:“The 'Microsoft.ACE.OLEDB.1 ...
- ERROR: HHH000123: IllegalArgumentException in class: com.tt.hibernate.helloworld.News, setter method of property: date
问题描述: Hibernate连接数据库时,报出如下错误: 十一月 29, 2016 3:08:31 下午 org.hibernate.tool.hbm2ddl.SchemaUpdate execut ...
- [转载]给IT人员支招:如何跟业务部门谈需求分析?
一提跟业务人员做“需求分析”,许多IT人员立刻就头大了,要么不在同一个“频道”讲话,要么“变来变去,定不下来”.如何跟业务部门谈需求分析呢,我们带着这个问题,与聚冠因尚的咨询顾问杨春波展开了讨论. 1 ...
- javascript、ECMAScript、DOM、BOM关系
ECMAScript,正式名称为 ECMA 262 和 ISO/IEC 16262,是宿主环境中脚本语言的国际 Web 标准. ECMAScript 规范定义了一种脚本语言实现应该包含的内容:但是,因 ...
- Codeforces 732F [边双联通分量][tarjan]
/* 不要低头,不要放弃,不要气馁,不要慌张 题意: 给一个无向图.现在要求给这个无向图的边加上方向. 定义f(x)为从x点出发能够到达的点的数目. 使得MIN(f(x))最大. 思路: 先tarja ...
- Python基础篇【第8篇】: Socket编程(二)SocketServer
SocketServer 在上一篇文章中我们学习了利用socket模块创建socket通信服务,但细心学习后就会发现利用socket模块创建的服务无法进行多进程的处理,当需要进行大量请求处理时,请求就 ...
- iscroll4 捕捉元素开发手机焦点图滑动效果
html标准代码格式 <div id="wrapper"> <div id="scroller" > <ul id="t ...
- 黑马程序员_ Objective-c 之Foundation之NSNumber ,NSValue, NSDate
Objective-c 之Foundation之NSNumber ,NSValue, NSDate 1.NSNumber具体用法如下: 在Objective-c中有int的数据类型,那为什么还要使用数 ...
- C#预编译
在C#开发中经常会遇到在Debug和Release模式下需要执行不同代码的情况,这个时候使用C#条件编译可以很好地解决这个问题,如 #if DEBUG // TO Do Debug Mode Code ...