适配方式

viewport适配（不好用）

方法：直接把布局视口宽度设置为设计稿宽度，然后按照设计稿的宽高进行布局即可

<meta name="viewport" content="width=375" />

优点：不需要有复杂的计算，直接使用设计稿上标注的px值

缺点：

不能使用完整的meta标签，就会导致某些手机上有兼容问题

不希望适配的元素也强制进行了适配，比如边框等

图片会失真

rem适配（主流方式，几乎完美）

主要就是把元素的css样式值单位设置为rem，然后通过更改根节点字号达到适配不同设备

em：当前元素的父元素的字体大小

rem：根节点（html、body）的字体大小

方案一

假设iphone6的根字体字号为100px:

根节点字号(适配其他设备) = （手机横向设备独立像素 * 100） / 设计稿宽度

css代码：直接使用rem为单位，值 = 设计稿的值 / 100

// 把设置根字体封装成函数
function adapter(){
  // 获取布局视口宽度，因为开启了理想视口，布局视口 = 设备横向独立像素值
  const dpWidth = document.documentElement.clientWitch
  // 计算根字体大小
  const rootFontSize = (dpWidth * 100) / 375
  // 设置根字体大小
  document.documentElement.style.fontSize = rootFontSize + "px"
}
adapter()
// 可以实现实时适配
window.onresize = () => {
  adapter()
}

方案二

假设iphone6的根字体字号为37.5px:

根节点字号(适配其他设备) = 设备横向独立像素值 / 10

css代码：直接使用rem为单位，值 = 设计值 /（设计稿宽度 / 10）

// 把设置根字体封装成函数
function adapter(){
  // 获取布局视口宽度，因为开启了理想视口，布局视口 = 设备横向独立像素值
  const dpWidth = document.documentElement.clientWitch
  // 计算根字体大小
  const rootFontSize = dpWidth / 10
  // 设置根字体大小
  document.documentElement.style.fontSize = rootFontSize + "px"
}
adapter()
// 可以实现实时适配
window.onresize = () => {
  adapter()
}

vw/vh适配（百分比，兼容性一般）

vw和vh是两个相对单位

vw：就相当于整个布局视口宽度的1%

vh：就相当于整个布局视口高度的1%

注意：

vw和vh有一定的兼容性问题

物理像素边框

在高清屏幕下1px对应更多的物理像素，所以1像素边框看起来就会比较粗

移动端事件

事件分类

touchstart：在元素上触摸开始时触发，主要用于元素触摸的交互，比如页面跳转、标签页切换等

touchmove：在元素上触摸移动时触发，主要用于页面的滑动特效、网页游戏、画板等

touchend：在元素上离开时触发，主要和touchmove事件结合使用

touchcancel：触摸被打断的时候触发，使用率不高

注意：

touchmove事件在触发之后，即使手指离开了元素，touchmove事件也是会持续触发的

想要触发touchmove与touchend事件，一定要先触发touchstart事件

事件的作用主要是实现移动端的界面交互

事件对象（部分）

const demo = document.getElementById('demo')
demo.addEventListener('touchstart',(event) => {
  consloe.log('我是事件对象：',event)
})

event.touches：屏幕上的触点数（就是用户用了几根手指）

event.targetTouches：当前元素上的触点数

event.changedTouches：改变了的触点数（增加或减少的数量）

注意：

在移动端点击事件和触摸事件都是可以触发的，但是点击事件是有延迟的（在理想视口状态下延迟相对较短，非理想视口的状态下延迟较长，理想视口就是设置meta标签），并且在使用时会有一定的感知，所以最好是使用触摸事件，时间主要作用于实现移动端的界面交互

点击穿透

如果在触摸事件中隐藏了元素，则click事件就会作用于新的元素上，触发新元素的click事件或是页面跳转，就叫做点击穿透

解决方式一

阻止触摸事件的默认行为

解决方式二

让背后的元素不再具有click事件即可，给新元素绑定触摸事件来代替click事件

解决方案三

让背后的元素暂时失去click事件，一定时间之后再复原

css：pointer-events：none 这个属性可以让元素不再响应事件，默认值是auto

解决方案四

让隐藏的元素延迟300毫秒左右隐藏

移动端开发（二）