c3媒体查询media响应式day08.pptx

响应式第八天;1、C3媒体查询：media

2、bootstrap框架

3、完成云课堂

;Top课程目标;课程信息

课程时长：07分50秒

课程名称：01JQ中的事件绑定和清除.avi

问答与练习

1、JQ中绑定事件、解除事件方法;1绑定多个事件

$(‘div’).on({

‘事件名1’:function(){},

‘事件名2’：function(){}

});

2绑定单个事件 $(div).on(事件名字,function(){})

2清除事件 $(‘div’).off(‘需要清除的事件名称列表，中间用空格隔开’);

代码：

$(div).on({

click:function(){

alert(click);

},

mouseenter:function(){

alert(mouseenter);

},

mouseleave:function(){

alert(mouseleave);

}

})

$(div).off(clickmouseleave);;课程信息

课程时长：08分40秒

课程名称：02拖拽原理分析.avi

问答与练习

1、鼠标摁下的同时，让div随着鼠标移动，当鼠标起来的时候，让div待在原地

鼠标按下：求出此时鼠标距离div左边和上边不变的值。

鼠标滑动：不停的去设置div此时应该具有的lefttop

鼠标抬起：将上一步中的赋值去除，让div停在某一个位置;课程信息

课程时长：06分33秒

课程名称：03拖拽完成.avi

问答与练习

1、案例分析

2、为了解决：当我们鼠标移动过快的时候，div会停止的这个bug，我们把mousemove和mouseup绑定给document

3、获取鼠标的坐标e.clientX和e.pageX

4、e.pageX和e.clientX的区别;1、鼠标摁下：

获取鼠标坐标

获取div距离文档的距离

并求两者之间的差值disX

摁下的同时，移动鼠标：

获取此时鼠标的坐标

并求出坐标与disX的差值L

把l赋值给div的left值

鼠标抬起的时候：

解除绑定的mousemove和mouseup事件;$(div).on(mousedown,function(ev){

vardisx=ev.clientX-$(div).offset().left;

vardisy=ev.clientY-$(div).offset().top;

$(document).on(mousemove,function(ev){

varl=ev.clientX-disx;

vart=ev.clientY-disy;

$(div).css({left:l,top:t});

});

$(document).on(mouseup,function(){

$(this).off(mousemovemouseup);

});

});;4、e.pageX和e.pageY的区别：

clientX:参照点是浏览器内容区域的左上角，而不是页面本身的body左上角，计算数值和滚动条是否滚动没有关系，只是绝对的计算鼠标点距离浏览器内容区域的左上角的距离，忽略了滚动条的存在。

pageX：参照点是即页面本身的左上角，而不是浏览器可见区域的左上角，无论滚动条是否滚动，他都是一样的距离值。;课程信息

课程时长：14分45秒

课程名称：04移动适配方案.avi

问答与练习

1、移动端的常见适配方案

当前设备的尺寸大小做为视口大小：京东

利用当前屏幕的独立像素比动态的来设置视口大小：淘宝（我们之前学过的）

将当前视口设置为一个固定值（640|750）：微信平台的页面，接下来使用的方案

metaname=viewportcontent=width=640px,user-scalable=no/;课程信息

课程时长：11分28秒

课程名称：05单屏滚动结构和样式.avi

问答与练习

1、利用之前学过的fullpage原理来完成这个案例

2、4个页面，每个页面都是和设备宽高一致

3、由于在滑动的同时，还能看到上一张或下一张图片，所以，我们需要将四个图片都叠在一起

4、由于我们的页面是图片，而且还要适配不同的设置，所以我们需要给li设置

background-size：cover；为了这句话能够生效，我们使用important提高权重，同时为了背景图能够永远居中显示，我们需要设置背景图的位置为centerto