源自：3-13 移动端项目开发——视口控制
在手机浏览器预览出现了样式错误问题，这是怎么回事？
<!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年慕课网新年特献</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%;
}
提问者：simon_wyk
2017-05-26 14:58
个回答
-
- 爱米
- 2017-06-01 11:10:25
top用的是%为单位，有时候会被手机的自带工具顶下来，有时候不会，，可以试试用vw做单位。