设备的划分：
image.png
媒体查询：
使用媒体查询能针对不同屏幕区间设置不同的布局和样式
怎么使用媒体查询：关于媒体查询 @media
语法： @media screen and (max-width: 768px) and (min-width: 320px){属性样式}
demo：
响应式容器：
- 在超小屏设备的时候 768px以下 当前容器的宽度100% 背景蓝色
- 在小屏设备的时候 768px-992px 当前容器的宽度750px 背景绿色
- 在中屏设备的时候 992px-1200px 当前容器的宽度970px 背景红色
- 在大屏设备的时候 1200px以上 当前容器的宽度1170px 背景黄色
body{
margin: 0;
padding: 0;
}
.container{
width: 1000px;
margin: 0 auto;
height: 1000px;
background: pink;
}
方案如下：
@media screen and (max-width: 768px) {
/*1. 在超小屏设备的时候 768px以下 当前容器的宽度100% 背景蓝色*/
.container{
width: 100%;
background: blue;
}
}
@media screen and (min-width: 768px) and (max-width: 992px){
/*2. 在小屏设备的时候 768px-992px 当前容器的宽度750px 背景绿色*/
.container{
width: 750px;
background: green;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px){
/*3. 在中屏设备的时候 992px-1200px 当前容器的宽度970px 背景红色*/
.container{
width: 970px;
background: red;
}
}
@media screen and (min-width: 1200px){
/*4. 在大屏设备的时候 1200px以上 当前容器的宽度1170px 背景黄色*/
.container{
width: 1170px;
background: yellow;
}
}
关于bootstrap基本模版：
title
normalize&reset区别:
共同点：都是重置样式库，增强浏览器的表现一致性
不同点：
举个例子：ul
reset.css list-style:none ---因为需求
normalize.css 不会重置ul样式 ---本身已经在每个浏览器表现一致的元素
一句话：都是增强浏览器的表现一致性但是normalize不会重置已经一致的元素
基本样式-container:
效果.png
栅格系统：
栅格系统：其实就是行和列的布局，网格状布局
行：row
container容器默认有15px的左右内间距 .row 填充父容器的15px的左右内间距 margin-left,margin-right -15px拉伸
360截图18750824131055.png
列：col-- 不确定（参数）
col：列样式
第一个：屏幕的大小
大屏设备 lg 大屏设备以上生效包含本身
中屏设备 md 中屏设备以上生效包含本身
小屏设备 sm 小屏设备以上生效包含本身
超小屏设备 xs 超小屏设备以上生效包含本身
第二个*：每一行的分等份，默认分成12等份 ，数字代表的是占多少份
demo:
大屏设备 让div平均分成6等份
中屏设备 让div平均分成4等份
小屏设备 让div平均分成3等份
超小屏设备 让div平均分成2等份
栅格系统-扩展功能:
col-xs-3
col-xs-9
响应式工具(媒体查询demo):
大屏设备 显示
中屏设备 隐藏
小屏设备 显示
超小屏设备 隐藏
响应式工具-bootstrap(demo):
大屏设备 显示
中屏设备 隐藏
小屏设备 显示
超小屏设备 隐藏
visible-lg 大屏显示其他隐藏
visible-md
visible-sm
visible-xs
3.2版本以后 建议使用hidden
hidden-lg
hidden-md
hidden-sm
hidden-xs
//显示
内容
//隐藏
自定义字体图标：
1.通过@font-face定义自己的字体
@font-face{}
2.申明自己的字体名称
font-family: 'wjs';
3.引入字体文件（约束某一段字符代码什么图案）
src:
url(../fonts/MiFie-Web-Font.svg) format('svg'),
url(../fonts/MiFie-Web-Font.eot) format('embedded-opentype'),
url(../fonts/MiFie-Web-Font.ttf) format('truetype'),
url(../fonts/MiFie-Web-Font.woff) format('woff');
4.怎么使用维护性更好
.wjs_icon{
font-family: wjs;
}
.wjs_icon_phone::before{
content: "\e908";
}
.wjs_icon_tel::before{
content: "\e909";
}
导航条:
collapse组件(切换):
切换
内容
内容
内容
内容
内容
轮播图：
轮播图pc:
需求：高度固定，图片居中，容器铺满
轮播图（wap）：
宽度自适应，高度自动变化
轮播图(响应式):
轮播图动态获取：
1.获取轮播图数据
var getData = function (callback) {
/*缓存了数据*/
if(window.data){
callback && callback(window.data);
}else {
/*1.获取轮播图数据*/
$.ajax({
type:'get',
url:'js/data.json',
/*强制转换后台返回的数据为json对象*/
/*强制转换不成功程序报错，不会执行success,执行error回调*/
dataType:'json',
data:'',
success:function (data) {
window.data = data;
callback && callback(window.data);
}
});
}
}
2.根据数据动态渲染 根据当前设备 屏幕宽度判断
var render = function () {
getData(function (data) {
/*2.根据数据动态渲染 根据当前设备 屏幕宽度判断 */
var isMobile = $(window).width() < 768 ? true : false;
//console.log(isMobile);
/*2.1 准备数据*/
/*2.2 把数据转换成html格式的字符串*/
/*使用模版引擎：那些html静态内容需要编程动态的*/
/*发现：点容器 图片容器 新建模版*/
/*开始使用*/
/*<% console.log(list); %> 模版引擎内不可使用外部变量 */
var pointHtml = template('pointTemplate',{list:data});
//console.log(pointHtml);
var imageHtml = template('imageTemplate',{list:data,isMobile:isMobile});
//console.log(imageHtml);
/*2.3 把字符渲染页面当中*/
$('.carousel-indicators').html(pointHtml);
$('.carousel-inner').html(imageHtml);
});
}
3.测试功能 页面尺寸发生改变事件
$(window).on('resize',function () {
render();
/*通过js主动触发某个事件*/
}).trigger('resize')
4.移动端手势切换
var startX = 0;
var distanceX = 0;
var isMove = false;
/*originalEvent 代表js原生事件*/
$('.wjs_banner').on('touchstart',function (e) {
startX = e.originalEvent.touches[0].clientX;
}).on('touchmove',function (e) {
var moveX = e.originalEvent.touches[0].clientX;
distanceX = moveX - startX;
isMove = true;
}).on('touchend',function (e) {
/*距离足够 50px 一定要滑动过*/
if(isMove && Math.abs(distanceX) > 50){
/*手势*/
/*左滑手势*/
if(distanceX < 0){
//console.log('next');
$('.carousel').carousel('next');
}
/*右滑手势*/
else {
//console.log('prev');
$('.carousel').carousel('prev');
}
}
startX = 0;
distanceX = 0;
isMove = false;
});
媒体查询-扩展:
响应式容器：
- 在超小屏设备的时候 768px以下 当前容器的宽度100% 背景蓝色
- 在小屏设备的时候 768px-992px 当前容器的宽度750px 背景绿色
- 在中屏设备的时候 992px-1200px 当前容器的宽度970px 背景红色
- 在大屏设备的时候 1200px以上 当前容器的宽度1170px 背景黄色
标签页(demo):
1
2
3
4
image.png
image.png
解决换行和滑动的问题：
var initMobileTab = function () {
/*1.解决换行问题*/
var $navTabs = $('.wjs_product .nav-tabs');
var width = 0;
$navTabs.find('li').each(function (i, item) {
var $currLi = $(this);//$(item);
/*
* width() 内容
* innerWidth() 内容+内边距
* outerWidth() 内容+内边距+边框
* outerWidth(true) 内容+内边距+边框+外边距
* */
var liWidth = $currLi.outerWidth(true);
width += liWidth;
});
console.log(width);
$navTabs.width(width);
/*2.修改结构使之区域滑动的结构*/
//加一个父容器给 .nav-tabs 叫 .nav-tabs-parent
/*3.自己实现滑动效果 或者 使用iscroll */
new IScroll($('.nav-tabs-parent')[0],{
scrollX:true,
scrollY:false,
click:true
});
}
阴影效果：
image.png
悬浮式导航：
data-spy="affix" data-offset-top="200"
css要设置top定位的值
.wjs_nav {
margin-bottom: 0;
border: none;
border-bottom: 1px solid #ccc;
background: #fff;
width: 100%;
border-radius: 0;
top: 0;
z-index: 9999;
}