该页面中间只有一张照片和一些文字。添加了一个媒体查询，以便当视口小于700像素时，它会放大图像，maaas会缩小我的屏幕，它会爆炸......然后一直到底部。
如何解决？
CSS：
|-----------------------|
| username | browser |
|-----------------------|
| user1 | Chrome |
| user1 | Firefox |
| user1 | Firefox2 |
| user3 | Safari |
| user3 | Chrome |
|-----------------------|
HTML：
body, html {
height:100%;
width: 100%;
padding:0;
margin:0;
background: #181A1B;
}
p {
font-family: 'Open Sans Condensed', san-serif;
font-size: 12px;
color: #C5C5C7;
line-height: 14px;
margin-top: 30px;
}
.block {
height: 100%;
text-align: center;
background: #181A1B;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
background: #181A1B;
}
.centered {
display: inline-block;
vertical-align: middle;
background: #181A1B;
max-width: 500px;
/* width: 100%; BUUUUGA*/
}
.contato ul{
list-style: none;
margin-top: 20px;
}
.contato ul li{
margin-right: 10px;
display: inline;
}
.contato ul li a{
display: inline-block;
}
.img_sprite1 {
width: 40px;
height: 38px;
background-image: url('../img/sprite.png');
background-repeat: no-repeat;
transition: 0.5s;
}
.img_sprite1:hover{
background-position: 0 -40px;
transition: 0.2s;
}
.img_sprite2 {
width: 40px;
height: 38px;
background-position: -49px 0;
background-image: url('../img/sprite.png');
background-repeat: no-repeat;
transition: 0.5s;
}
.img_sprite2:hover{
background-position: -49px -40px;
transition: 0.2s;
}
.img_sprite3 {
width: 40px;
height: 38px;
background-position: -98px 0;
background-image: url('../img/sprite.png');
background-repeat: no-repeat;
transition: 0.5s;
}
.img_sprite3:hover{
background-position: -98px -40px;
transition: 0.2s;
}
@media screen and (max-width:700px) {
.block {
background: #181A1B;
}
.block:before {
content: '';
display: inline-block;
background: #181A1B;
}
.centered {
border: 1px solid green;
width: 100%;
}
.contato {
margin-top: 40px;
}
.contato ul li {
margin-right: 30px;
}
.img_sprite1 {
width: 63px;
height: 65px;
background-image: url('../img/sprite2.png');
background-repeat: no-repeat;
transition: 0.5s;
}
.img_sprite1:hover{
background-position: 0 -70px;
transition: 0.2s;
}
.img_sprite2 {
width: 63px;
height: 65px;
background-position: -70px 0;
background-image: url('../img/sprite2.png');
background-repeat: no-repeat;
transition: 0.5s;
}
.img_sprite2:hover{
background-position: -70px -69px;
transition: 0.2s;
}
.img_sprite3 {
width: 63px;
height: 65px;
background-position: -140px 0;
background-image: url('../img/sprite2.png');
background-repeat: no-repeat;
transition: 0.5s;
}
.img_sprite3:hover{
background-position: -140px -69px;
transition: 0.2s;
}
p {
font-family: 'Open Sans Condensed', san-serif;
font-size: 19px;
color: #C5C5C7;
line-height: 22px;
margin-top: 30px;
}
}