为什么要学移动app ?
1 .用户需求
2.企业需求
3.It 公司解决需求
4. 用户基础大
相对于pc端的网站、
1.随时随地使用
2.用户量大
3.浏览器的版本比较高
相对于移动app
1. 学习成本比较低
2 .发布简单 不需要审核 如苹果app审核比较繁琐
3.用户安装简单 只需要浏览器
4. 一次编码 多个平台使用，而且可以通过工具 打包成不同平台的app
分辨率
逻辑分辨率
概念：设备的宽度*高度 单位px
设备分辨率
概念 ： 屏幕上共有物理像素点的个数
图片的最小单位是指物理像素点
同样大小的设备 分辨率也高 越清晰
设备像素比 devicePixelRatio
对角线 一般手机的屏幕尺寸都是以对角线衡量
ppI 像素密度比 1 inch 里面拥有像素点的个数
srcset图片便签的属性 可以根据不同屏幕的清晰度加载不同的图片
失真：
图片的清晰度跟设备的清晰度不一致
或者说 图片的像素点跟设备的物理像素点不一致
对于失真解决的关键代码
设备的像素比
srcset 图片标签的属性
在工作中如何解决失真问题
1 不处理 忍受模糊
2 统一使用高清图片
3 根据设备像素比 srcset图片标签的属性
视口
概念 ： 在设备屏幕上所看到的网页区域
布局视口
概念 ： 手机厂商设置980px的视口 为了兼容旧的网站 给用户更好的体验
出现问题：使用绝对长度单位的元素 宽度跟高度都会被缩放
视口的大小是980px
理想视口：
视口和屏幕的宽度等大 并且使用绝对长度单位元素的宽度不会被缩放
不是标准写法：
标准写法：
理想视口的参数理解
meta: 标签用来描述设置一个HTML网页文档的属性
content要设置或者的描述内容
width 设置视口的宽度device-width等于屏幕的宽度
initial-scale 页面打开的时候视口放大的倍数
user-scalable 是否允许用户缩放页面
maximum-scale 如果允许放大的话 最大可以放大多少倍
minimum-scale 如果允许放大的话 最小可以放大多少倍
css预处理器
有一套提高编写css代码的技术
基本css预处理器
styles
less
sass
less的执行过程
编写符合less语法的less文件
使用工具将less文件编译成css文件
页面中引用编译好的css文件
less语法
变量 @color:red
函数 .chang(){}
嵌套
导入@import "base.css"
注释 //这种不会编译到css中去
/**/会被编译到css中去
增大背景图片的响应区域
1.设置元素box-sizing:border-box
2.background-origin:content-box
background-clip:content-box
3.动态增大padding
图片的默认3px
display:block
在保留标签的同时 设置标签之间的间隙
1.给父元素加fontsize:0
2.再给标签单独加fontsize
图片标签浮动的时候容器出现的bug
固定定位和绝对定位
固定定位是相对于屏幕进行定位
绝对定位是现对于已经定位了的父元素进行定位
div设置固定或者绝对定位后,会导致 没有了宽度.所以 需要手动设置宽度或者由子元素撑开宽度
父元素加padding,一个子元素绝对定位 另外i一个子元素宽度加100%
尾部
如果尾部导航是用图片撑开并且 加了固定定位的话, 导致被它遮挡的高度不固定
解决:直接再加一个尾部导航的标签就可以了(不要加定位了)
触屏事件
为什么需要触屏事件
因为click事件不能满足多指触控事件的需求
概念
手指在屏幕上所放生的一些事件
click 在移动端出现延迟
机制：当你点击屏幕的时候 click 并不是马上触发 而是等待一段时间后 判断时候有第二次点击 如果有的话 就放大页面 如果没有就触发当前事件
造成的原因
手机厂商设置的 为了用户更方便放大页面
注意: 1. 触发事件不能在pc端触发
2. 在绑定触屏事件的时候 建议使用div.addEventLister("触屏事件",function(){}) 不推荐使用 div.ontouchstart() 因为一些旧版本的浏览器不支持
自己封装tap事件
1.封装手指的个数不能超过1个
2.手指按下的时间不能太长300ms
a.记录开始时间
b.end计算总时间
3.手指的滑动的距离不能太长
判断距离
封装移动端滑动事件
1.判断手指的个数不能超过1个
2.手指按下的时间不能太长 800ms
a.start记录时间
b.end 计算总时间
3.手指的滑动的距离不能太小 15px
a.判断距离
a 再判断方向
b.距离不满足条件直接return
c.start 开始坐标
d.end拿到结束坐标
e.计算距离和方向
一些触屏事件类型
touchstart 手指触摸到屏幕的事件 相当于 onmousedown
touchmove 手指在屏幕上滑动触发的事件 相当于 onmusemove
touchend 手指离开屏幕触发的事件
相当于onmouseup
触屏事件源的4个属性
touches 屏幕上的所有触摸点的集合
targetTouches 目标元素上的所哟触摸点的集合
changeTouches 目标元素状态所发生改变（进入 移动 离开） 触摸点的集合
target 事件源
触摸点对象的3个对位置属性
clientX/Y 相当于视口的坐标
pageX/Y相对于页面的坐标
screenX/Y 相对于屏幕的坐标（谷歌正常/火狐跟clientX/Y一样）
响应式布局
是一套代码 可以页面在不同宽度设备上进行显示，让用户有更好的体验
核心原理
媒体查询
媒体查询
一种css的语法 ，可以在不同屏幕宽度下，加载不同的css代码
媒体查询的类型
all 所有屏幕screen和print
screen 正常显示的屏幕
print 打印机
媒体查询的特性
width/height 宽度/高度
max-width/max-hieght 最大宽高
min-width/min-hieght、最小宽高
aspect-ratio 视口的宽高比
min-aspect-ratio 最少宽高比
max-aspect-ratio 最大宽高比
媒体查询的关键字
or 有，好体现
and 和
only 只有
not 取反
媒体查询的使用方式
1.在css中media常用
2.link中 media 当做属性
3.style中media使用 当做属性
css 引入方式
内嵌 @media screen and (width:800px){
body{
background-color: red;
}
行内-->
<style media="screen and (width:800px)"></style>
外联
<link media="screen and (width:800px)">
媒体查询的引入方式:
1 直接在css中写 -> 是普通的样式代码 同层级 用得最多
2 直接在style标签中 通过属性的方式写的 一般不用
3 在link标签中 通过属性的方式写的 一般不用
boostrap基本模板讲解
忽略。。。
栅格系统
把屏幕分为4中 分为12份 每一列占一份
4种宽度不同的屏幕
极小屏幕 xs 小于等于768px 手机设备
小屏幕 sm 768px ~992px 平板电脑
中等(普通)屏幕 md 992px~1200px - 老旧的电脑显示器
大屏 lg 大于1200px 大的电脑显示器
列偏移 col-lg-offset-3
列嵌套
列排序
# 京东分类页面
##1.静态布局的注意细节
父元素加pdding一个子元素级绝对定位，另一个子元素的宽度和高度为100%
body并没有高度 但可以显示背景颜色
可以设置 body,html{
height:100%
}
##2.左侧的原生js实现的菜单栏的滚动条
1.手动拖拽
分析
###1 手动拖动
a translateY
b 用到的事件 touchstart touchmove
touchstart
0 验证手指的个数
1 记录按下的坐标
touchmove
0 验证手指的个数
1 记录移动的坐标
2 计算距离
3 距离设置给ul标签
4 需要加上以前已经移动了的距离
a 如何获取 加一个touchend事件 获取离开的坐endY
b 获取上一次的距离 preDis=endY-startY
c preDis用在touchmove中
5 用哪个触摸点数组(targetTouches和c页面hangedTouches) 都可以!
2 弹簧效果
3 点击菜单置顶效果
### 2、弹簧效果
a.自定义弹簧的高度
b touchmove 判断 不让ul继续往下移动
c touchend 判断 反弹
1 用preDis 和0 比较
2 满足条件 反弹
a 需要加上过渡
b 设置ul标签的translateY(0)
### 3 点击菜单置顶效果
a 先引用插件 绑定tap事件
b 获取被点击的li标签的索引
1 添加了自定义属性
2 获取被点击的li标签
3 通过e.target获取被点击的dom元素
c 向上移动的值 =索引*li标签的高度
### 拓展
可以来回滚动
kai(left_box).tap(function (e) {
var adom = e.target;
var lidom = adom.parentNode
var IndexLi = lidom.dataset.index;
var middle = parseInt((document.querySelector(".container").offsetHeight) / 40) / 2;
//计算可视区的高度 除去li的个数取整 再除去2
var height = -(IndexLi - middle) * lidom.offsetHeight;//当前的索引减去中间那个
if (IndexLi <= middle) { //如果索引小于中间的索引 高度为0
height = 0;
}
if (IndexLi > lis.length - middle) {//当索引大于li的个数设置高度为最大高度
height = left_ul_Hight;
}
preValue = height; //记录上一次的距离
left_box.style.transition = "transform .5s";
left_box.style.transform = "translateY(" + height + "px)";
active(IndexLi - 1) })
##3 右侧内容滚动条
IScroll.js
父元素的第一个子元素才可以滚动
#zepto.js
特点
轻量级
模块化
语法和jq类似
偏向于移动端
内置了常见的触屏事件
#响应式布局
概念：
一套可以在不同宽度设备上运行，可以提供给客户良好的体验
核心原理
媒体查询
css的语法
根据设备的不同加载对应的css的代码
@media 声明一个媒体查询
其他的知识点
媒体类型：
all包含screen和print
screen带正常屏幕的设备
print打印机
媒体的特性
width-宽度
min-width 最少宽度
max-width 最大宽度
height 高度
min-height 最少高度
max-height 最大高度
aspect-ratio 视口的宽高比
min-aspect-ratio 最少宽高比
max-aspect-ratio 最大宽高比
媒体关键字
and
or 逗号体现 在代码中
not
noly
引入方式
1.在css中直接写 层级一样 最常用
2.在style标签上通过属性的方式
3.在link标签上通过属性的方式
注意的细节
1.要加上理想的视口
2 要注意空格的部分 and () and ()
@media screen and(min-width:400px) and (max-width:600px){
body{
background-color: green;
}
}
#boostrap的基本模板解析
如果使用ie浏览器访问该网站的话 默认使用最高版本的内核渲染
但是有时候不起作用 ie自身出现了bug
理想视口
标准写法
html5让ie8兼容h5的标签
respond.min.js 让ie8识别媒体查询 只能够一服务器的形式大剋 才能工作
条件注释
lt less than
ie8以及 以下的时候 会自己下载这两个文件
其他 浏览器 忽略 不会下载
#栅格系统
栅格系统把所有的屏幕分成4种-屏幕的宽度 分为12份 每一列占一份
宽度不同的屏幕
极小屏幕 xs 小于768px 手机设备
小屏幕 sm 大于768px 小于 992px 平板电脑
中等屏幕 md 992px ~1200px 老旧的电脑显示器
大屏 lg 大于1200px的电脑显示器
container 版心宽度
container-fluid的全屏 流式 百分比
col 行
列偏移
col-lg-offset-1
编写快捷
function whatScreen() {
var width = document.querySelector("html").offsetWidth;
var title = document.querySelector("title");
if (width <= 768) {
title.innerHTML = "极小屏幕-" + width;
} else if (width > 768 && width <= 992) {
title.innerHTML = "小屏幕-" + width;
} else if (width > 992 && width <= 1200) {
title.innerHTML = "普通屏幕-" + width;
} else if (width > 1200) {
title.innerHTML = "大屏幕-" + width;
}
}
#布局
流式布局 百分比布局 自适应
代表 京东商城
##响应式布局
比如宽度要到某个范围之后页面才会发生改变
###rem+媒体查询
1. 字体大小会随着发生改变
2. 容器或者元素的大小也会发生改变
3.优惠卷
##工作中如何选择解决方案
1.从项目需求出发
2.如果是响应式 boostrap实现
还要字体大小发生改变的话 rem+媒体查询
3.基本的移动端 如果没让文字大小发生改变的需求 流式布局(百分比布局)自试应
#rem+媒体查询做屏幕适配
1. px是绝对长度单位
2. em 相对长度单位 相对于自身的fontsize
1.谷歌浏览器默认最小的字体12px
2.谷歌默认的字体为16px
3. rem 相对长度单位 相对于html标签的fontsize
补充：基础值和设计稿等宽的媒体查询里面的html标签fontsize的大小 100px
公式fontsize=基础值* 要适配的屏幕的宽度/设计稿的宽度
设计稿改变之后 一样可以使用这套方案
可以用js代替媒体查询的工作 （不建议）
pc端滚动条占宽度 移动端不占宽度（建议在移动端上测试）
在线标注工具
标你妹
在线px转rem的工具
#click 和 tap 的比较
其实在2015 年底 谷歌浏览器和safari 浏览器 检测是否有理想视口
如果有 把click 的点击延迟 取消
如果没有 click 延迟 还是存在
其他的浏览器 没有做这个设置 那么不管有没有理想视口 click还是有延迟 tap 比click 要快
火狐 就是一般浏览器的代表
在火狐下 tap 先执行 click 后执行
2000ms click再触发
解决方案
统一使用click (意味忍受延迟)
2.fastclick.js click比tap 还要快！
不需要使用整个页面的单击都是click
在页面中 有tap 只是其中一个手势事件
swipe longtap
在工作中为最好的兼容性 还是用zepto.js
万一点透了
再加载fastclick ->把出现bug的事件 改成click 就可以了
其他地方哪个时间都可以click 或者 tap
什么是点透 如何解决
1.一般浏览器tap 比 click 要快
等待2000ms 过后 click 在触发
click 触发的时候 触发到了a 标签
a 标签就发生了跳转行为
2 a 都使用了click 不解决(忍受)
b 使用 fastclick click比tap 再在遮罩层 使用click 就可以看
网友评论