移动端续讲及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 ...
随机推荐
- 在excel中如何计算两个时间之间的差[转]
因为时间是由序列号所代表的,用户可以用较晚的时间减去较早的时间以得到间隔.例如,单元格A3含有5:30,单元格B3含有14:00,下面的公式返回8:30(间隔8小时30分). =B3-A3 然而,如果 ...
- 原生ajax与伪ajax
原生ajax源码 function GetXHR(){ var xhr = null; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); #如果没有XML ...
- pip和pip3的区别
安装了python3之后,会有pip3 1. 使用pip install XXX 新安装的库会放在这个目录下面 python2.7/site-packages 2. 使用pip3 install XX ...
- 利用WebSocket和EventSource实现服务端推送
可能有很多的同学有用 setInterval 控制 ajax 不断向服务端请求最新数据的经历(轮询)看下面的代码: setInterval(function() { $.get('/get/data- ...
- Jmeter--函数助手之随机函数_Random(随机函数)
各函数调用方法如下:1)__Random( , , ),获取值的方式:${__Random( param1,param2 ,param3 )},param1为随机数的下限,param2为随机数的上限, ...
- mysql—查询数据库表的数量
1.查看数据库表数量SELECT count(TABLE_NAME) FROM information_schema.TABLES WHERE TABLE_SCHEMA='dbname'; 2.获取 ...
- 配置apache运行cgi程序
配置apache运行cgi程序 文章目录 [隐藏] ScriptAlias目录的CGI ScriptAlias目录以外的CGI 配置apache运行cgi程序可分为两种情况,一是ScriptAlias ...
- double处理
String s = "1,3;2,3,4;5"; String[] split = s.split(";");double[][] d;d = new dou ...
- 【Linux】CentOS6安装jdk1.8
1.查看官网下载地址 接受协议后,点击下载链接 查看发出的请求,获得下载地址 其中后面的AuthParam参数为本次下载的即时参数,每次都不一样 2.下载安装包 下载完后改个名 wget https: ...
- hadoop2.7伪分布式搭建
0.配置主机名 hostnamectl set-hostname spark1 1.上传hadoop-2.7.1.tar.gz文件并解压 tar -xvf hadoop-2.7.1.tar.gz 2. ...