![be76b87a40e48525e59f5cf03607e8e3.png](https://i-blog.csdnimg.cn/blog_migrate/f75721e611dd8722a80d6396992124e6.jpeg)
移动端
1.1移动端视口问题
概述:移动端开发的时候需要加上meta标签。但是除了那一个常用的meta标签以外还有很多形式的meta标签;
![67799663361af95eca42c8594592c60c.png](https://i-blog.csdnimg.cn/blog_migrate/3756c6b96876017bdb43854e31cd06cc.jpeg)
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根标签
![eaf7954ac0df4f99286eb9a81ade26a1.png](https://i-blog.csdnimg.cn/blog_migrate/1c4c6e8e119fa93473db1071169701bc.jpeg)
媒体布局
概述:媒体布局又称【响应式布局】,它的实现原理是link标签新增了一个属性media;
注意:就是在不同的条件下写不同样式;
![fc9e934957e1e59b550541572a11d4e8.png](https://i-blog.csdnimg.cn/blog_migrate/8caa8650ac940e8d1a22a44d40f948ef.png)
关键字之间需要有空格
min-width:大于等于 max-width:小于等于
数据需要加上单位,可以添加多个条件。
![ae07643a7886345358205d4f2439c97a.png](https://i-blog.csdnimg.cn/blog_migrate/d017521f0457b45bec0de1b9f1a736a4.jpeg)
2.1媒体布局练习
![23ee61ff25c0cb5edcdc867a130dfd1a.png](https://i-blog.csdnimg.cn/blog_migrate/aad01c166242454f1b06019fa4816f9c.jpeg)
![6052fc596bd4dc1fe3e8887f589c95b7.png](https://i-blog.csdnimg.cn/blog_migrate/5b1477be14aa652a67cb2c381b39a09c.jpeg)
移动端的事件
概述:在移动端事件当中【PC端的单击事件是可以使用的】,移动端的事件有三个;
touchstart【触碰开始】、touchmove【触碰移动】、touchend【触碰结束】;移动端的三个事件需要使用DOM2级事件;【移动端事件当中我们习惯性的将默认事件阻止】;
![9a77c6aa5b755c2d516eaa51fa1ccf9d.png](https://i-blog.csdnimg.cn/blog_migrate/6599c9687ddf22066b63516be25624a2.jpeg)
3.1获取移动端常用数据
概述:移动端最常用的数据就是鼠标距离手机屏幕左侧、顶部数据;
![1988352628ce904b8a94a68dcc178779.png](https://i-blog.csdnimg.cn/blog_migrate/e8e5d20c05e56e818cb4b5c5581fb24b.jpeg)
3.2移动端的拖拽
概述:PC端拖拽套路:鼠标按下、鼠标移动、鼠标抬起;
移动端是没有这三个事件;
![980589a659434e5089d1645cadc73389.png](https://i-blog.csdnimg.cn/blog_migrate/83dc68e0aa94f1faa4082efc0cc61990.jpeg)
3.3移动端事件注意事项
概述:在移动端开发当中我们可以使用单击事件【尽量能不用就别使用】稍微有点延迟问题;
在移动端当中最常用单击事件a标签。a标签劲量使用移动端事件touchstart代替单击事件;
![ef66a777d253a495e17f6b030e1502cc.png](https://i-blog.csdnimg.cn/blog_migrate/534b74c3d62238bab622a3014bf84945.jpeg)
点语法:系统内置属性 set||getAttribute:不仅仅可以操作系统内置属性、自定义属性也可以
window.location.href :设置地址栏跳转
导航栏
4.1原生导航栏写法-了解
纯样式写出来的
![0e7d3a1ab5a2885b5e7e202599be6a5f.png](https://i-blog.csdnimg.cn/blog_migrate/a715104cc5d397685b9fbcd8540ff68a.jpeg)
4.2原生导航写法-nav伪元素实现
![46736bd3e947c9666aa40f5f87d490e7.png](https://i-blog.csdnimg.cn/blog_migrate/822fb73f74253c0646b23db9b70c847a.jpeg)
swiper框架
官网地址:https://www.swiper.com.cn/
概述:swiper框架可以在移动端中使用,也可以在PC端中使用;
5.1new关键
问题:函数执行方式一共学习了多少种?
a.函数名加上小括号
b.定时器、延迟的回调函数
c.函数作为事件处理函数,当事件触发的时候函数执行
d.函数作为数组的元素枚举出来执行
e.new关键字也是执行函数一种方式
![0212e0f07c003f1372347d8eaa5438d6.png](https://i-blog.csdnimg.cn/blog_migrate/cb507dd7e0801877dc8c7976402bb82d.jpeg)
f.new关键字也是执行函数一种方式
g.new关键字一定是放在函数名字之前
h.new关键字执行函数系统自动返回的一个引用类型json
上面已经介绍了关于移动端开发的必备技巧~如果有什么想看的内容,也可以私信我,如果觉得好记得点赞同或者收藏哦~