                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /HTML5+CSS3實現(xiàn)春節(jié)賀卡

在手機瀏覽器預(yù)覽出現(xiàn)了樣式錯誤問題，這是怎么回事？

<!DOCTYPE?html>
<html?>
	<head>
		<meta?charset="utf-8">
		<meta?http-equiv="X-UA-Compatible"?content="IE=edge,?chrome=1">
		<meta?name="viewport"?content="initial-scale=1.0,?minimum-scale=1,maximum-scale=1.0,?user-scalable=no,?width=device-width"?/>
		<meta?name="format-detection"?content="telephone=no">
		<title>新年賀卡</title>
		<link?rel="stylesheet"?type="text/css"?href="main.css">
		<script?src="js/main.js";type="text/javascript";charset="UTF-8"></script>
	</head>
	<body>
	<div?class="music">
		<img?src="img/music_pointer.png"?/>
		<img?class="play"??id="music"?src="img/music_disc.png"?/>
	</div>
	<div?class="page"?id="page1">
		<div?class="bg"></div>
		<div?class="p1_lantern">
			<p>點擊屏幕</br>開啟好運2017</div></p>
		<div?class="p1_imocc"></div>
		<div?class="p1_words">2016年慕課網(wǎng)新年特獻</div>
	</div>
	<div?class="page"?id="page2">
		<div?class="bg"></div>
		<div?class="p2_circle"></div>
		<div?class="p2_2016"></div>
	</div>
	<div?class="page"?id="page3">
		<div?class="bg"></div>
		<div?class="p3_logo"></div>
		<div?class="p3_title"></div>
		<div?class="p3_couplet_first"></div>
		<div?class="p3_couplet_second"></div>
		<div?class="p3_blessing"></div>
	</div>
	<audio?src="audio/汪蘇瀧?-?一笑傾城1.mp3"?class="bg_music"?type="audio/mpeg"?autoplay="true">
	</audio>
	</body>
</html>

*?{
	margin:?0;
	padding:?0;
	border:?none;
	font-size:?1.5625vw;
}

html?{
	height:?100%;
}

body?{
	height:?100%;
}

.page?{
	position:?absolute;
	height:?100%;
	width:?100%;
}

.music?{
	position:?fixed;
	border:?4px?solid?#ef1639;
	width:?15vw;
	height:?15vw;
	top:?3vh;
	right:?4vw;
	z-index:?5;
	border-radius:?100%;
	background-color:white?;
}

.music>?img:first-of-type?{
	position:?absolute;
	top:?24%;
	right:?2.5%;
	width:?28.421%;
	z-index:?4
}

.music>?img:last-of-type?{
	position:?absolute;
	top:?0;
	right:?0;
	bottom:?0;
	left:?0;
	margin:?auto;
	width:?79%;
}

.music?>?img.play{
	-webkit-animation:?music_disc?4s?linear?infinite;
}
@-webkit-keyframes?music_disc{
	from{-webkit-transform:?rotate(0deg);}
	to{-webkit-transform:?rotate(360deg);}
}

.page>?.bg?{
	position:?absolute;
	left:?0;
	right:?0;
	top:?0;
	bottom:?0;
	z-index:?-1;
}


/*p1/*/

#page1?{
	display:?block;
}

#page1>?.bg?{
	background:?url(img/p1_bg.jpg)?no-repeat;
	background-size:?100%;
}
#page1?p{font-size:??3.506rem;margin:?0?auto;}
#page1>.p1_lantern?{
	position:?absolute;
	background:?url(img/p1_lantern.png)?no-repeat?center?bottom;
	top:?-3.4%;
	background-size:?100%;
	width:?45vw;
	height:?71.2vh;
	font-size:?3.506rem;
	color:?white;
	left:?0;
	right:?0;
	margin:?auto;
	text-align:?center;
	padding-top:?31vh;
	box-sizing:?border-box;
	-webkit-box-sizing:?border-box;
}
#page1>?.p1_lantern:before?{
	position:?absolute;
	content:?"";
	left:?0;
	right:?0;
	bottom:?0;
	top:?0;
	margin:?auto;
	width:?30vw;
	height:?30vw;
	background:?#d60b3b;
	opacity:?.5;
	border-radius:?50%;
	box-shadow:?0?0?10vw?10vw?#d60b3b;
	-webkit-box-shadow:?0?0?10vw?10vw?#d60b3b;
	z-index:?-1;
	animation:?flash?.5s?infinite?alternate;
}
@keyframes?flash?{
	from{opacity:?.8
			transform:scale(.8?.8);}
	to{opacity:?1}
}

#page1>.p1_imocc?{
	background:?url(img/p1_imooc.png)?no-repeat?center;
	background-size:?100%;
	width:?27.656vw;
	height:?18.63vh;
	position:?absolute;
	left:?0;
	right:?0;
	bottom:?9vh;
	margin:?auto;
}

#page1>.p1_words?{
	position:?absolute;
	font-size:?2.134rem;
	right:?0;
	bottom:?43px;
	left:?0;
	text-align:?center;
}


/*p2*/
#page2?{
	display:?none;
}

#page2>?.bg?{
	background:?url(img/p2_bg.jpg)?no-repeat;
	background-size:?100%;
}

#page2>?.p2_circle?{
	background:?url(img/p2_circle_outer.png)?no-repeat?center;
	background-size:?100%;
	position:?absolute;
	width:?59.375vw;
	height:?59.375vw;
	left:?0;
	top:?0;
	right:?0;
	bottom:?0;
	margin:?auto;
	animation:?circle_outer?2s?linear?infinite;
}
@keyframes?circle_outer{
	from{transform:?rotate(0deg);}
	to{transform:?rotate(360deg);}
}

#page2>?.p2_circle:before?{
	background:?url(img/p2_circle_middle.png)?no-repeat?center;
	background-size:?100%;
	position:?absolute;
	content:?"";
	left:?0;
	right:?0;
	top:?0;
	bottom:?0;
	margin:?auto;
	width:?45.625vw;
	height:?45.625vw;
	/*animation:?circle_middle?2s?linear?infinite；*/
}
/*@keyframes?circle_middle{
	from{transform:?rotate(0deg);}
	to{transform:?rotate(720deg);}
}*/

#page2>?.p2_circle:after?{
	background:?url(img/p2_circle_inner.png)?no-repeat?center;
	background-size:?100%;
	position:?absolute;
	content:?"";
	left:?0;
	right:?0;
	top:?0;
	bottom:?0;
	width:?39.9375vw;
	height:?39.9375vh;
	margin:?auto;
	-webkit-animation:?circle_inner?2s?linear??1s?infinite；
}
@-webkit-keyframes?circle_inner{
	0%?{-webkit-transform:?rotate(0deg);}
	100%?{-webkit-transform:?rotate(-1080deg);}
}


#page2>?.p2_2016?{
	background:?url(img/p2_2016.png)?no-repeat?center;
	background-size:?100%;
	position:?absolute;
	left:?0;
	right:?0;
	top:?0;
	bottom:?0;
	margin:?auto;
	width:?27.5vw;
	height:?6.24vh;
}


/*p3*/

#page3?{
	display:?none;
}

#page3>?.bg?{
	background:?url(img/p3_bg.jpg)?no-repeat?center;
	background-size:?100%;
}

#page3>?.p3_logo?{
	position:?absolute;
	top:?7.82vh;
	left:?0;
	right:?0;
	width:?34.6875vw;
	height:?6.327vh;
	background:?url(img/p3_logo.png)?no-repeat?center;
	background-size:?100%;
	margin:?auto;
}

#page3>?.p3_title?{
	background:?url(img/p3_title.png)?no-repeat?center;
	background-size:?100%;
	top:?21vh;
	left:?0;
	right:?0;
	margin:?auto;
	width:?48.125vw;
	height:?50vh;
	position:?absolute;
}

#page3>?.p3_couplet_second?{
	position:?absolute;
	background:?url(img/p3_couplet_second.png)?no-repeat?center;
	background-size:?100%;
	top:?25.48vh;
	left:?3.75vw;
	width:?22.8125vw;
	height:?41.652vh;
}

#page3>?.p3_couplet_first?{
	position:?absolute;
	background:?url(img/p3_couplet_first.png)?no-repeat?center;
	background-size:?100%;
	top:?25.48vh;
	right:?3.75vw;
	width:?22.8125vw;
	height:?41.652vh;
}

#page3>?.p3_blessing?{
	position:?absolute;
	background:?url(img/p3_blessing.png)?no-repeat?center;
	background-size:?100%;
	width:?32vw;
	height:?32vw;
	bottom:?10vh;
	left:?0;
	right:?0;
	margin:?auto;
	border-radius:?50%;
}