移动端，响应式布局

Bootstrap

响应式布局经常用到Bootstrap,首先去官网下载，接着要导入Bootstrap的css和js.然后选择你要的类型，复制其html，style,js代码。在自己修改即可。

栅格系统
首先有个容器 div ,类名为container
一行row 里面有12列
代码：col-lg-x 超大屏幕下分x份
col-md-x 大屏幕
col-sm-x 中屏幕
col-xs-s 小屏幕
hidden-lg超大屏幕下隐藏
-md大屏幕下隐藏
-sm中屏幕下隐藏
-xs小屏幕下隐藏
visible-md 在大屏幕下显示
-xs
-lg
-sm
用法：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201002200042619.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbl9maWdodGlu,size_16,color_FFFFFF,t_70#pic_center 移动端，响应式布局
超大屏幕下

大屏幕下

中屏幕下

小屏幕下，一些隐藏了

列偏移：
col-md-offset-3;在大屏幕下向????偏移三分
列排序：
col-md-push-8 在大屏幕下，将当前元素往后推8分，会覆盖
col-md-pull-4在大屏幕下，将当前元素往前挪4份，会覆盖。

媒体查询
当页面尺寸大于1280时可以做什么
@media screen and (max-width:1280px){
.container{
width:1280px
}
将container的尺寸固定为1280，不会随着页面尺寸变大而变大。
}

移动端网页特效

触屏事件
touchStart 点击触发
touchmore 点击滑动触发
touchend 点击离开时触发
触摸事件对象
e.touches 触摸屏幕的列表
e.targetTouches: 触摸DOM的列表
e.changedToyches ：手指状态发生改变的列表
坐标
pageX;整个页面
screenx；手机屏幕
切换类
e.classList.toggle(’’);
移动端禁用缩放
《meta content=‘user-scalable=no’>;
常用插件
轮播图插件:swiper isscroll

本地存储

sessionStorage和localStrorage
sessionStorage的生命周期到关闭窗口。以键值形式村粗；
localStorage的生命周期永久生效。
方法：存localStorage.setItem(‘us’,value);
移动端，响应式布局

获取：localStorage.getItem(‘key’)
删除：localStorage.removeItem(‘key’)
珊所有：localStorage.clear();