click事件在什么时候出发_什么是移动端?
主要内容什么是移动端、移动端视口、rem em px区别、移动端适配、移动端布局和马蜂窝案例。
结合视频学习效果更佳:
https://www.bjsxt.com/down/9319.htmlwww.bjsxt.com
移动端与REM视频教程-尚学堂移动端与REM视频教程-尚学堂www.bjsxt.com
第一节 移动端介绍
通过手机预览的网页,就是手机端网页
网页分为:
pc端网页 移动端网页 小程序
ios工程师 安卓工程师
1.1早期移动端适配
比如:手机端切换的百度首页的状态,视口大小是980 缩放网页
点击新闻,进入手机端状态
1.2移动端视口
三个视口
1.布局视口
2.视觉视口
3.理想视口
布局视口的默认宽度并不是一个理想的宽度。显然用户希望在进入页面时可以不需要缩放就可以有一个理想的浏览和阅读尺寸。理想视口仍是为移动端设备准备的。只有手动添加meta视口标签方才生效。如果没有meta视口标签,那么布局将会维持它的默认宽度。
如下代码,告诉浏览器,布局视口的宽度应该与理想视口的宽度一致。(一般来讲我们都会将布局视口的宽度设为设备宽度一样,然后使用css媒体查询编写一套针对移动端的展示方案。)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1,user-scalable=0">
meta viewport 标签首先是由苹果在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持,事实也证明这个东西还是非常有用的。
在苹果的规范中,meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值),如下:
- width 设置layout viewport 的宽度,为一个正整数,或字符串"width-device"
- initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
- minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
- maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
- user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
1.3 视口添加代码区别
代码演示
加上视口
本章作业
了解移动端视口布局
第二节 移动端适配
2.1 移动端像素介绍
2.1.1物理像素
1) 屏幕的分辨率/设备像素
2) 设备能控制显示的最小单元,可以把物理像素看成是对应的像素点
2.1.2 设备独立像素 & css像素
设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素(比如:CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”),然后由相关系统转换为物理像素。
2.1.3 dpr比 & DPI & PPI
1) dpr: 设备像素比,物理像素/设备独立像素 = dpr, 一般以Iphon6的dpr为准 dpr = 2
Ipon6:750设计稿大小 分辨率/375手机的css=2
2) PPI: 一英寸显示屏上的像素点个数
3) DPI:最早指的是打印机在单位面积上打印的墨点数,墨点越多越清晰
2.1.4 扩展内容
视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕,由苹果公司
在2010年在iPhone 4发布会上首次推出营销术语。
Iphone的dpr = 2; 人类肉眼分辨的极限
2.2 px rem em区别?
rem em px区别:
px:像素点 相对于屏幕分辨率 固定的
rem:相对大小 受根源元素影响 html
em:相对大小 受父元素的影响
默认:1rem=1em=16px
如何自适应字体大小改变?
因为rem受根元素大小的影响,所以不同的手机分辨率下修改html大小实现控制页面字体大小
2.3 移动端适配
适配的目标
引用一文章的描述:
在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放(看起来差不多)”
1.js 动态设置根元素fontSize
2. 最简单的移动端适配方案(rem+vw)
在很早以前,vw 这个单位就已经被列入w3c规范了,如果基本都支持了,vw 表示屏幕的1%,可能有人会问到那跟百分比有什么区别呢? 通常,很多情况确实可以被百分比替代,但是要知道百分比如果要子n代元素都生效,那得所有父级元素都得相对html,body 100%宽才能有作用,而vw则永远相对 屏幕1%.说了vw的含义来说说怎么结合rem适配吧.
这里直接给出结果,只需一行代码即可
html{font-size:13.33333333vw}
然后我们即可根据设计稿(前提设计稿是750px的),这样我们写1rem即为设计稿上的100px
效果如上图所示,注意:应设置meta为移动端
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
是不感觉很诧异,写的width:1rem,heigth:1rem的div 就是50px* 50px (iphone6为2倍屏,即对应750px设计稿上的100px*100px) 怎么搞定的,1句代码就能实现,太神奇.不信可以看看上图或者自己试一下.恩,就是这么简单,1句css代码就搞定,无需任何的js代码.
方案只能兼容手机,甚至连ipad兼容都不好,当然,此处的兼容不是兼容问题,是效果问题,只要兼容vw的设备都能用这个方案,但是由于适配的根本是vw这个, 这个会随着设备的宽度越来越大,那么用rem做单位的元素也会越来越大,以至于如果这个在pc上,那么没法预览了,效果会很差,字太大了.这样我们可以设置一下当屏幕过大的时候的情况,我们可以加一句代码
第三节 马蜂窝案例
3.1 移动端设计稿测量和实现
3.2 还原设计稿
3.3 马蜂窝移动端布局
https://m.mafengwo.cn/
代码
css代码
本章作业
1.移动端设计稿还原
2.马蜂窝网站仿写
第四节马蜂窝动态数据
4.1 马蜂窝数据布局
进入页面获取第一屏幕数据
接口地址:https://m.mafengwo.cn/?category=get_info_flow_list&page=1
4.2 滚动页面底部加载更多
4.3 移动端事件
click 300ms延迟
touch 可以解决 touchstart touchmove touchend click
fastclick.js
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。
简而言之,FastClick 在检测到touchend事件的时候,会通过 DOM 自定义事件立即触发一个模拟click事件,并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。使用方法如下。
原理: 在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉
第一步:在页面中引入fastclick.js文件。
下载:faskclick https://github.com/ftlabs/fastclick
第二步:在js文件中添加以下代码
在 window load 事件之后,在body上调用FastClick.attach()即可
如果你项目使用了JQuery,就将上面的代码改写成:
本章作业
1.马蜂窝首页
2.网易云音乐
click事件在什么时候出发_什么是移动端?相关推荐
- click事件在什么时候出发_超全的js事件机制amp;事件委托
超全的js事件机制&事件委托,想要理解js事件只需认真看完此篇即可~ 目录结构: 什么是事件机制 事件冒泡事件捕获 DOM事件流事件委托 误区 在同一个对象上注册事件,并不一定按照注册顺序执行 ...
- click事件在什么时候出发_剖析setTimeout和click点击事件的触发顺序
下面是一段非常简单的JavaScript代码 dianji setTimeout(function () { alert('timer handler') }, 2000) function test ...
- click事件在什么时候出发_关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
- java弹窗点击事件_[Java教程]jQuery的click事件在当前页弹出层窗口(不打开新页面)...
[Java教程]jQuery的click事件在当前页弹出层窗口(不打开新页面) 0 2015-10-24 15:00:04 当给链接添加一个click事件,我们可能不希望Web浏览器按照其常规模式退出 ...
- 在同时使用label和input标签下下label绑定click事件执行两次的问题
初始代码结构如下: <label :for="index" class="check-label" @click="handleChexk(it ...
- 百度地图自定义覆盖物,在手机上无法监听click事件
百度地图自定义覆盖物,在手机上无法监听click事件 最近在做手机web端集成百度地图遇到了个坑儿:手机端不支持自定义覆盖物的click事件: 1.自带的marker是支持的(marker不属于自定义 ...
- fastclick 解决移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
- fastclick 解决移动端click事件延迟300ms和点击穿透问题
一.移动端click点击事件300ms延迟介绍 在正常情况下,如果不进行特殊处理,移动端在触发点击事件时,会有300ms的延迟.换句话说,当我们在点击移动端页面后不会立即做出反应,而是会等待300ms ...
- 触发dblclick事件时,避免触发click事件-实例
正常情况下触发双击dblclick事件时会同时触发两遍单击click事件,这肯定不是我们想要的结果,那么如何避免伴随触发click事件呢? 浏览器监听双击事件的机制是,有没有在一定时间内监听到两次连续 ...
最新文章
- Intel格式和ATT格式汇编区别
- 创建安卓app的30个经验教训
- asp.net 拦截html,关于c#:如何在-ASPNET-Core-中实现全局异常拦截
- Linux容器能否弥补IoT的安全短板?
- 位运算(、|、^、~、>>、<<)
- jni ndk_带有NDK的Android JNI应用程序
- Linux中级之netfilter防火墙(iptables)
- BZOJ4305 数列的GCD
- java实现代码在线编译器-从零开发(一)简单本地编译+运行测试
- eviews9.0详细安装步骤
- 电路基础知识 -- 虚短和虚断
- 不同编程语言下CH347DLL的调用方法
- 使用dom4j读写xml实例
- 二叉树所有节点数、叶子节点数的计算
- Qt Designer+PyQt5 控件使用经验(不定时随缘更新)
- iOS虚拟支付被封,6个技巧帮你快速解决烦恼
- MinGW-w64 C/C++编译器各版本说明
- 冬令营Web基础整理——Day2
- 硬盘测试之influx-stress
- 山东大学软件学院数据挖掘实验五(2)的坑
热门文章
- day12 java的方法覆盖(重写)
- 1_初识less引用变量作用域变量差值
- 用imspost制作catia后处理_苏州3d打印:手板制作的三种工艺制作常识以及优势对比...
- 数组的内存理解(图示)
- Java运算符(Operator)之 算数运算符(ArithmeticOperator)
- mysql数据库查询源码_超简单php mysql数据库查询类
- vue划入划出事件_基于vue中对鼠标划过事件的处理方式详解
- allure的安装和使用(windows环境)
- 吐槽大会4_《吐槽大会4》不愧都是国家队,真吐槽!孙杨霸气喊话霍顿
- visual assist x_可能是最美溜背,大众探岳X能否重新定义轿跑SUV?