效果预览
html部分
<!DOCTYPE html>
<!--geyao-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobile.css">
<title>春节倒计时</title>
</head>
<body>
<div class="container">
<h2><span id="title">春节倒计时</span>2022</h2>
<div class="countdown">
<div id="day">--</div>
<div id="hour">--</div>
<div id="minute">--</div>
<div id="second">--</div>
</div>
<!-- 手动切换不好看 直接加定时器切换 微信公众号关注前端小歌谣
-->
<!-- <div id="btn">切换背景</div> -->
</div>
<script src="js/script.js"></script>
</body>
</html>
移动端样式(mobile.css)
@media screen and (max-width: 1025px) {
* {
margin: 0;
padding: 0;
}
body {
background: rgb(129, 155, 190) url(../image/geyao1.jpg);
background-size: cover;
background-position: center center;
height: 100%;
}
.container {
margin: 0;
color: #fff;
line-height: normal;
position: absolute;
align-items: center;
left: 5%;
right: 5%;
}
.container h2 {
font-size: 6em;
text-a