移动端开发不得不会的技巧

移动端

1.1移动端视口问题

概述：移动端开发的时候需要加上meta标签。但是除了那一个常用的meta标签以外还有很多形式的meta标签；

1.2百分比布局

子元素的宽度、补白、外边距的数据参照的是父元素的宽度的百分比;外边框的数据是没有百分比。

 

box-sizing:border-box:让元素向内坍塌【坍塌的数据和外边框、补白有关系，和margin没有关系】

1.3flex布局

概述：flex布局主要的作用是可以在移动端中快速写布局格式:

容器属性：flex-wrap:wrap【换行】 jusitify-content：center【水平居中】  align-items:center【垂直居中】

项目属性：flex-grow：0 【分剩余空间】 flex-shrink：1【如果剩余空间不足、自动缩小】

1.4rem布局

概述：rem是一个相对单位，相对的是html根标签

媒体布局

概述：媒体布局又称【响应式布局】，它的实现原理是link标签新增了一个属性media；

注意：就是在不同的条件下写不同样式；

关键字之间需要有空格

min-width:大于等于    max-width:小于等于

数据需要加上单位，可以添加多个条件。

2.1媒体布局练习

 

移动端的事件

概述：在移动端事件当中【PC端的单击事件是可以使用的】，移动端的事件有三个;

touchstart【触碰开始】、touchmove【触碰移动】、touchend【触碰结束】;移动端的三个事件需要使用DOM2级事件;【移动端事件当中我们习惯性的将默认事件阻止】;

 

3.1获取移动端常用数据

概述：移动端最常用的数据就是鼠标距离手机屏幕左侧、顶部数据；

 

3.2移动端的拖拽

概述：PC端拖拽套路：鼠标按下、鼠标移动、鼠标抬起；

移动端是没有这三个事件；

 

3.3移动端事件注意事项

概述：在移动端开发当中我们可以使用单击事件【尽量能不用就别使用】稍微有点延迟问题；

在移动端当中最常用单击事件a标签。a标签劲量使用移动端事件touchstart代替单击事件；

点语法：系统内置属性  set||getAttribute：不仅仅可以操作系统内置属性、自定义属性也可以

 

window.location.href :设置地址栏跳转

导航栏

4.1原生导航栏写法-了解

纯样式写出来的

 

 

4.2原生导航写法-nav伪元素实现

 

swiper框架

官网地址：https://www.swiper.com.cn/

概述：swiper框架可以在移动端中使用，也可以在PC端中使用；

5.1new关键

问题：函数执行方式一共学习了多少种？

a.函数名加上小括号

b.定时器、延迟的回调函数

c.函数作为事件处理函数，当事件触发的时候函数执行

d.函数作为数组的元素枚举出来执行

e.new关键字也是执行函数一种方式

 

 

f.new关键字也是执行函数一种方式

g.new关键字一定是放在函数名字之前

h.new关键字执行函数系统自动返回的一个引用类型json