移动端续讲及zepto移动端插件外加touch插件介绍
媒体查询:针对不同设备,显示不同的样式。
设备像素比:dpr device-piexl-ratio
在he开发中,要一个3陪高清图片;
1080>=320*3 (主要是为了解决图片的失真问题)
移动端忌讳出现x轴滚动条,所以要使用overflow-x:hidden; (一般在html/body标签上设置)
box-sizing:border-box 解决移动端一些问题;
看移动端设备,我们所作的页面只能在浏览器中打开
查看浏览器的信息: window.navigator.usetagent属性上,我们可以通过这个用来检测设备
var reg=/ipad/;
if(reg.test(window.navigator.userAgent)){ 说明是苹果设备 }
css通过media all and (-webkit-device-pixel-ratio:3.0) 设置像素比;
js获取像素比:window.device-pixel-ratio
移动端的主体需要js和css调整;
max-width:640px (主体的宽基本都这样设)
position:fixed; 改变元素的本质;
rem:移动端适配
input;
input标签在android系统上不带圆角,在ios上带圆角;
input,botton{
-webkit-appearance:none;
}
a标签,在移动端会有一个高亮效果,
去除高亮效果:
a{
-webkit-tap-highlight-color:transparent;
}
布局方式:
双飞翼
圣杯
弹性
自适应
中间固定,两端自适应的案例
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
.box>div:nth-of-type(1){
flex:1;
}
.box>div:nth-of-type(2){
width:600px;
}
.box>div:nth-of-type(3){
flex:1;
}
中间自适应,两端固定
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
.box>div:nth-of-type(1){
width:100px
}
.box>div:nth-of-type(2){
flex:1
}
.box>div:nth-of-type(3){
width:100px
}
原生写移动端事件,用户效果很差,所以我们使用了zepto.js的插件,
zepto插件与jQuery极其相似;
zepto的优势:
zepto是手机端的框架,和jQuery最大的区别,jQuery对ie做了太多的处理,而zepto不需要,且压缩后仅有9kB,(轻量级)
1.文档加载zepto打头;
zepto(function(){
})
2.选择器:使用$(""),进行元素选取,与jQuery一样;
3.$.each():对数组,集合,对象进行遍历
4.$.map():对数组加工,得到新数组;
$.each与$.map的区别?
each中的回调,第一个参数索引,第二个参数是元素,map与他相反,且map必须有return
map返回加工后的新集合;each返回原来的集合
5.add():添加元素到当前匹配的元素
6.addClass():为每个元素添加类,多个类用空格隔开;
after():在每个匹配的元素后添加内容;
before():在每个匹配元素前面添加内容
append():在匹配的结尾处插入内容;
after()与append()的区别?
after插入在元素后面,但在元素外;append在元素里;
after():读取或设置元素的属性;
children():获取每个匹配元素直接子元素,参数可过滤
css():读取或设置css属性
zepto中的特效只有show()和hide()
事件:
原生js在移动端的事件
js原生中,只有dom2级事件写法
div.addEventListener("事件名",fn,false)
div.onclick=function(){} dom0级事件;
js有touch系列事件,有click touchstart(触摸) touchmove(移动) touchend(离开) 但效果不好
click就相当于单击,不建议使用,
移动设备,当第一次点击之后,300ms之内又去点击了,说明是双击,300ms内没去点击说明是单击
trouchstart
通过在zepto中在引入touch插件,便可使用zepto中拓展的事件了
分为:点击和滑动;
点击:singleTap(单击) doubleTap(双击) longTap(长按)
滑动:swipe(滑动) swipeLeft(左滑) swipeRight(右滑) swipeUp(上滑) swipeDown(下滑)
zepto中使用事件函数,需要在zepto的后面引入touch.js文件,否则报错
swiper插件 轮播
zepto 中的 on 事件,可以进行绑定事件,最恐怖的是,我们可以进行事件委托的写法
$("body").on("click",".box",function(){
console.log(我是 box 元素,我被点击了) //为什么这样写,1 可以不需要考虑 异步的事件,2. 我们是对 body 的点击事件,但是通过事件委托传递给 box
})
移动端续讲及zepto移动端插件外加touch插件介绍的更多相关文章
- 基于Zepto移动端下拉加载(刷新),上拉加载插件开发
写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...
- 【Web】移动端下拉刷新、上拉加载更多插件
移动网站中常常有的功能:列表的下拉刷新.上拉加载更多 本例介绍一种简单使用的移动端下拉刷新.上拉加载更多插件,下载及参考地址:https://github.com/ximan/dropload 插件依 ...
- 关于emoji表情,支持在app端发送web端显示,web端发送给app端显示,web与wap端互相显示。
要用到emoji.js和emoji.jquery.js两个插件配合实现三端互通. 1.app端发送的emoji表情----到服务器---服务器存储的是‘问号’,无法显示如图所示: 后台的同学也试验了网 ...
- Asp.net SignalR 实现服务端消息推送到Web端
之前的文章介绍过Asp.net SignalR, ASP .NET SignalR是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信. 今天我 ...
- BluetoothLE-Multi-Library 一个能够连接多台蓝牙设备的库,它可以作为client端,也可以为server端。支持主机/从机,外围设备连接。
github地址:https://github.com/qindachang/BluetoothLE-Multi-Library BluetoothLE-Multi-Library 一个能够连接多台蓝 ...
- 监听微信端,手机端,ios端的浏览器返回事件,pc端关闭事件
直接上代码了,可以监听微信端,手机端,iOS端的浏览器返回事件,关闭事件不支持 当进入该页面,我们就给这个history压入一个本地的连接.当点击返回.后退及上一页的操作时,就进行监听,在监听代码中实 ...
- 【输入法】向Android端Gboard字典中导入PC端搜狗细胞词库
[输入法]向Android端Gboard字典中导入PC端搜狗细胞词库 环境 Android 5.1.1 Gboard 8.7.10.272217667-release -armeabi-v7a PC端 ...
- zabbix配置文件详解--服务(server)端、客户(agent)端、代理(proxy)端
在zabbix服务(server)端.客户(agent)端.代理(proxy)端分别对应着一个配置文件,即:zabbix_server.conf,zabbix_agentd.conf,zabbix_p ...
- 【javascript类库】zepto和jquery的md5加密插件
[javascript类库]zepto和jquery的md5加密插件 相信很多人对jQuery并不陌生,这款封装良好的插件被很多开发者使用. zepto可以说是jQuery在移动端的替代产品,它比jQ ...
随机推荐
- 解决keil5中文注释乱码方法
菜单上面的edit-->Configuration-->Editor-->Encoding 选择Chinese GB2312 点击OK即可解决 参考 解决keil和source in ...
- 数学: HDU Co-prime
Co-prime Time Limit : 2000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Subm ...
- mongoose 数据库操作2
mongoose的内置的主要功能解说 除了定义文档结构和你要存储的数据类型外.模式(Schema)还用于下面定义: · Validators (异步和同步) · Defa ...
- python查询mysql中是否存在某张表(传参)
客户端输入了表的名字,服务端判断表是否存在. 参考:https://blog.csdn.net/qq_36523839/article/details/80639297 需要导入re模块: impor ...
- AFNetworking2.0源码解析<二>
本篇我们继续来看看AFNetworking的下一个模块 — AFURLRequestSerialization. AFURLRequestSerialization用于帮助构建NSURLReque ...
- libboost_regex 备份用时
libboost_regex-vc100-mt-s-1_57.lib //生成数据
- 10年前文章_eclipse下perl环境搭建
eclipse下perl环境搭建1.Eclipse下安装perl插件Help -Software Updates…- Available .- Add Site… :http://e-p-i-c ...
- Netty学习--第二章 BIO的模型详解
一.什么是阻塞.非阻塞.同步.异步 我们以A线程调用B线程的过程例子来讲解这四个概念 在一个程序里,A调用B了,此时如果是 同步: A必须等待B返回结果后,才能继续执行,但是在这期间A会一直监控B的返 ...
- Django【第8篇】:Django之查询知识点总结
关于查询知识点总结 models.Book.objects.filter(**kwargs): querySet [obj1,obj2]models.Book.objects.filter(**kwa ...
- Django数据库查询优化与AJAX
目录 数据库设计三大范式 orm相关的数据库查询优化 惰性查询 all.only与defer select_related与prefetch_related MTV与MVC模型 MTV(models ...