移动端zepot媒体查询media queries

使用zepot做轮播图
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>jd首页</title>

autoMove();
}, 1000);
}

});
}
//定时器
var timerId=setInterval(function(){
index++;

autoMove();
},1000);
// 左滑,需要清除定时器
$('.lunbo').swipeLeft(function(){
clearInterval(timerId);
timerId=undefined;
index++;
autoMove();
})
// 右滑,需要清除定时器
$('.lunbo').swipeRight(function(){
clearInterval(timerId);
timerId=undefined;
index--;
autoMove();
})
})
</script>
</head>
<body>

使用zepot时需要根据使用的事件导入不同的事件的js,['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown',
'doubleTap', 'tap', 'singleTap', 'longTap'等事件]tap是zepot里的点击事件

媒体查询(响应式的实现)可以根据屏幕大小,调节不同的样式media queries
需要有一个container的class,
@media screen and (min-width: 600px) and (max-width: 900px){
.container{
width: 100%;
max-width:650px;
background-color:hotpink;

}
}
格式,注意and前后都有空格,不能漏写,不能漏写.container{}

bootstrap的网址www.bootcss.com
现在实际开发用的最多的是3.3.5版本,2版本是兼容ie的,以前用的多,
bootstrap的模板页

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">-------------------------------1

<title>bootstrap的模板页</title>

<link href="lib/css/bootstrap.min.css" rel="stylesheet">-----------------------------------2

</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

<script src="lib/js/jquery.min.js"></script>---------------------------------------------5

<script src="lib/js/bootstrap.min.js"></script>----------------------------------------------6

可能需要改6处地方,第一处是根据需要可能改自适应宽度,2-6处都是路径需要注意,7处是hack写法,不是注释(less than ie9)

lib文件夹不要忘了创建,导入图标时需要引入fonts文件夹,最前面的三个meta标签必须有,必须在最前面的meta
bootstrap是基于jquery的,所以必须先引入jq

栅格系统
需要加一个class为container-fluid或者container的父元素,container-fluid的宽度时父元素的100%,container宽度为固定宽度,最多可以分为12份,超出12份时,会另起一行,内部实现的原理就是 float

单元格需要放在 class = row的容器中,每一个单元格都是使用'col-xx-'数字的方式设置百分比,其中xx按由小到大的顺序依次为xs,sm,md,lg...xs是分辨率<768px,sm分辨率<992px并且>=768,md分辨率<1200并且>=992,lg分辨率>=1200,详情见网站www.bootcss.com
<div class='container-fluid'>
<div class="row myRow">
<div class="col-md-2 col-sm-4 col-xs-7">.col-md-1</div>
<div class="col-md-3 col-sm-4 col-xs-3">.col-md-1</div>
<div class="col-md-7 col-sm-4 col-xs-2">.col-md-1</div>
</div>
hidden-xs表示xs尺寸的时候隐藏,需要多个尺寸隐藏需要写多个类似的hidden
图标和样式见网站,图标需要添加一个图标名的class,样式可以根据参考代码修改使用
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

转载于:https://www.cnblogs.com/sw1990/p/5877669.html

移动端zepot媒体查询media queries相关推荐

css3的媒体查询(Media Queries)
css3的媒体查询(Media Queries) 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesh ...
媒体查询Media Queries详解
@media 标签可以说是响应式网页的开发基础.其主要由媒体类型(Media Type)和媒体特性(Media Query)两部分组成. Media Type 设定后面规则生效的展示类型,包括all ...
CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
文章目录媒体查询介绍 Media Queries具体使用一.最大宽度Max Width 二.最小宽度Min Width 三.多个Media Queries使用四.设备屏幕的输出宽度Device ...
怎样使用CSS3媒体查询(Media Queries)制作响应式网站
自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...
css3媒体查询导航设计,如何用纯css 媒体查询media queries实现响应式汉堡导航菜单...
Hamburger_icon PC端和手机移动端均适配,依据设备的宽度大小决定是否值下拉菜单样式一. head里添加meta移动端的样式 width viewport的宽度 height viewp ...
html5移动端开发(rem和媒体查询@media)
css下:index.css @charset "utf-8"; body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fields ...
媒体查询(media)
目录媒体查询介绍 Media Queries具体使用一.最大宽度Max Width 二.最小宽度Min Width 三.多个Media Queries使用四.设备屏幕的输出宽度Device Wi ...
CSS媒体查询“@media”在调试中切换移动设备时不起作用。
今天在学习CSS响应式网页设计中的媒体查询,遇到个有趣的问题,主要就是在调试过程中切换移动设备和电脑,同样的代码将有不同的结果.在切换移动设备调试时@media对于"max-width=97 ...
媒体查询(@media语法、案例)详解
媒体查询 @media 语法 1. 直接写在 CSS 样式中 2. 针对不同的媒体设备,从外部链入不同的 stylesheets(外部样式表) 使用 @media 实现网页变色龙 @media 语法 ...

移动端zepot媒体查询media queries

移动端zepot媒体查询media queries相关推荐

最新文章

热门文章