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();