1.功能描述
使用css3的@media查询来进行根据页面宽度,进行响应式样式切换,并且在元素上显示本页面的宽度。并且结合CSS3动画来进行样式切换。
2.主要考点
-
如何使用@media查询,以及它的相应写法
例如定义三种页面样式宽度,如手机,平板与pc:
手机宽度为0-319px;平板为320-1023px;pc为1024px以上
那么样式就要书写三种样式分别对应上面三类宽度(例如已知类选择器名称为.div):
手机宽度为0-319px → 默认样式;
平板为320-1023px → @media(min-width: 320px);
pc为1024px以上 → @media(min-width: 1024px);
(min-width代表当前样式兼容的最小宽度。)可以通过下图来进行加深理解
-
了解CSS3动画的相关属性以及它的用途(此处参考了菜鸟教程中的CSS3 动画 )
-
如何获取页面的宽度(思路:监听窗口大小改变事件→获取当前窗口的宽度→宽度值显示在页面上)
3.踩到的坑:
- 问题1:css书写中,@media(min-width: 320px;)中的样式没有生效
- 回答1:查看网页调试工具,该发现样式没有赋值进去。对比1024px的样式发现,在语句末尾多加了;使它样式没有生效,去除即可。
- 问题2:怎么监听窗口大小改变事件?
- 回答2:使用 window.addEventListener(‘resize’,方法名称A)函数,可以用第一参数为resize的事件名,监听窗口大小改变。当改变时即调用方法A。
- 问题3:监听到事件后,怎么获取页面的宽度,使用什么变量代表页面宽度?
- 回答3:使用dom文档对象中的documentElement.clientWidth这是当前页面的宽度。
4.相应框架或语言:
html,js,css3
5.相关代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div</title>
<style>
/* 当设备宽度还不足320px的移动设备情况 */
.view{
width: 50px;
height:50px;
border: 5px solid black;
background-color:red;
}
.view2{
width:50px;
height:50px;
border-radius: 0%;
background:red;
position:relative;
animation-name:myfirst;
/* 完成动画所需要的时间 */
animation-duration:5s;
/* 动画播放速度曲线 */
animation-timing-function:linear;
/* 动画的从何时开始 */
animation-delay:2s;
/* 规定动画播放次数 */
animation-iteration-count:infinite;
/* 动画是否下周期逆时针地运行 */
animation-direction:alternate;
/* 规定动画是否运行 */
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
/* 宽度为320px至1024时 */
/* min-width: 320px末尾加了;此整个样式就会丢失 */
@media (min-width: 320px) {
.view{
width: 100px;
height:100px;
background-color:blue;
}
.view2{
width:100px;
height:100px;
border-radius: 50%;
}
}
/* 宽度大于1024px至无穷时 */
@media (min-width: 1024px) {
.view{
width: 300px;
height:300px;
background-color:green;
}
.view2{
width:300px;
height:300px;
border-radius: 0%;
}
}
</style>
</head>
<body>
<div id="t" class="view">123</div>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div class="view2"></div>
<script type="text/javascript">
//添加事件,window.addEventListener('resize',start),其中resize是窗口或框架被重新调整大小的事件名称。start是它所需要执行的函数
window.addEventListener('resize',start)
function start(){
//document.documentElement.clientWidth (width+padding)
//document.documentElement.offsetWidth (width+border+padding)
// document.documentElement.scrollWidth (元素真实width,包括隐藏的width)
document.getElementById('t').innerText = document.documentElement.clientWidth;
document.getElementById('a').innerText = document.getElementById('t').clientWidth
document.getElementById('b').innerText = document.getElementById('t').offsetWidth
document.getElementById('c').innerText = document.getElementById('t').scrollWidth
}
</script>
</body>
</html>