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

  设备像素比: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. 在excel中如何计算两个时间之间的差[转]

    因为时间是由序列号所代表的,用户可以用较晚的时间减去较早的时间以得到间隔.例如,单元格A3含有5:30,单元格B3含有14:00,下面的公式返回8:30(间隔8小时30分). =B3-A3 然而,如果 ...

  2. 原生ajax与伪ajax

    原生ajax源码 function GetXHR(){ var xhr = null; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); #如果没有XML ...

  3. pip和pip3的区别

    安装了python3之后,会有pip3 1. 使用pip install XXX 新安装的库会放在这个目录下面 python2.7/site-packages 2. 使用pip3 install XX ...

  4. 利用WebSocket和EventSource实现服务端推送

    可能有很多的同学有用 setInterval 控制 ajax 不断向服务端请求最新数据的经历(轮询)看下面的代码: setInterval(function() { $.get('/get/data- ...

  5. Jmeter--函数助手之随机函数_Random(随机函数)

    各函数调用方法如下:1)__Random( , , ),获取值的方式:${__Random( param1,param2 ,param3 )},param1为随机数的下限,param2为随机数的上限, ...

  6. mysql—查询数据库表的数量

    1.查看数据库表数量SELECT count(TABLE_NAME) FROM information_schema.TABLES WHERE TABLE_SCHEMA='dbname';  2.获取 ...

  7. 配置apache运行cgi程序

    配置apache运行cgi程序 文章目录 [隐藏] ScriptAlias目录的CGI ScriptAlias目录以外的CGI 配置apache运行cgi程序可分为两种情况,一是ScriptAlias ...

  8. double处理

    String s = "1,3;2,3,4;5"; String[] split = s.split(";");double[][] d;d = new dou ...

  9. 【Linux】CentOS6安装jdk1.8

    1.查看官网下载地址 接受协议后,点击下载链接 查看发出的请求,获得下载地址 其中后面的AuthParam参数为本次下载的即时参数,每次都不一样 2.下载安装包 下载完后改个名 wget https: ...

  10. hadoop2.7伪分布式搭建

    0.配置主机名 hostnamectl set-hostname spark1 1.上传hadoop-2.7.1.tar.gz文件并解压 tar -xvf hadoop-2.7.1.tar.gz 2. ...