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>
6.运行效果：
