媒体查询:针对不同设备,显示不同的样式。

  设备像素比: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插件介绍的更多相关文章

  1. 基于Zepto移动端下拉加载(刷新),上拉加载插件开发

    写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...

  2. 【Web】移动端下拉刷新、上拉加载更多插件

    移动网站中常常有的功能:列表的下拉刷新.上拉加载更多 本例介绍一种简单使用的移动端下拉刷新.上拉加载更多插件,下载及参考地址:https://github.com/ximan/dropload 插件依 ...

  3. 关于emoji表情,支持在app端发送web端显示,web端发送给app端显示,web与wap端互相显示。

    要用到emoji.js和emoji.jquery.js两个插件配合实现三端互通. 1.app端发送的emoji表情----到服务器---服务器存储的是‘问号’,无法显示如图所示: 后台的同学也试验了网 ...

  4. Asp.net SignalR 实现服务端消息推送到Web端

              之前的文章介绍过Asp.net SignalR,  ASP .NET SignalR是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.  今天我 ...

  5. BluetoothLE-Multi-Library 一个能够连接多台蓝牙设备的库,它可以作为client端,也可以为server端。支持主机/从机,外围设备连接。

    github地址:https://github.com/qindachang/BluetoothLE-Multi-Library BluetoothLE-Multi-Library 一个能够连接多台蓝 ...

  6. 监听微信端,手机端,ios端的浏览器返回事件,pc端关闭事件

    直接上代码了,可以监听微信端,手机端,iOS端的浏览器返回事件,关闭事件不支持 当进入该页面,我们就给这个history压入一个本地的连接.当点击返回.后退及上一页的操作时,就进行监听,在监听代码中实 ...

  7. 【输入法】向Android端Gboard字典中导入PC端搜狗细胞词库

    [输入法]向Android端Gboard字典中导入PC端搜狗细胞词库 环境 Android 5.1.1 Gboard 8.7.10.272217667-release -armeabi-v7a PC端 ...

  8. zabbix配置文件详解--服务(server)端、客户(agent)端、代理(proxy)端

    在zabbix服务(server)端.客户(agent)端.代理(proxy)端分别对应着一个配置文件,即:zabbix_server.conf,zabbix_agentd.conf,zabbix_p ...

  9. 【javascript类库】zepto和jquery的md5加密插件

    [javascript类库]zepto和jquery的md5加密插件 相信很多人对jQuery并不陌生,这款封装良好的插件被很多开发者使用. zepto可以说是jQuery在移动端的替代产品,它比jQ ...

随机推荐

  1. 解决keil5中文注释乱码方法

    菜单上面的edit-->Configuration-->Editor-->Encoding 选择Chinese GB2312 点击OK即可解决 参考 解决keil和source in ...

  2. 数学: HDU Co-prime

    Co-prime Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Subm ...

  3. mongoose 数据库操作2

     mongoose的内置的主要功能解说 除了定义文档结构和你要存储的数据类型外.模式(Schema)还用于下面定义: ·        Validators (异步和同步) ·        Defa ...

  4. python查询mysql中是否存在某张表(传参)

    客户端输入了表的名字,服务端判断表是否存在. 参考:https://blog.csdn.net/qq_36523839/article/details/80639297 需要导入re模块: impor ...

  5. AFNetworking2.0源码解析<二>

    本篇我们继续来看看AFNetworking的下一个模块 — AFURLRequestSerialization.   AFURLRequestSerialization用于帮助构建NSURLReque ...

  6. libboost_regex 备份用时

    libboost_regex-vc100-mt-s-1_57.lib  //生成数据

  7. 10年前文章_eclipse下perl环境搭建

    eclipse下perl环境搭建1.Eclipse下安装perl插件Help -Software Updates…- Available .- Add Site… :http://e-p-i-c ...

  8. Netty学习--第二章 BIO的模型详解

    一.什么是阻塞.非阻塞.同步.异步 我们以A线程调用B线程的过程例子来讲解这四个概念 在一个程序里,A调用B了,此时如果是 同步: A必须等待B返回结果后,才能继续执行,但是在这期间A会一直监控B的返 ...

  9. Django【第8篇】:Django之查询知识点总结

    关于查询知识点总结 models.Book.objects.filter(**kwargs): querySet [obj1,obj2]models.Book.objects.filter(**kwa ...

  10. Django数据库查询优化与AJAX

    目录 数据库设计三大范式 orm相关的数据库查询优化 惰性查询 all.only与defer select_related与prefetch_related MTV与MVC模型 MTV(models ...