問題:
可能原因:
背景圖位置設置錯誤
原始程式:
位置:https://www.youthtaiwan.net/News_Content.aspx?n=C87DBAD8E7B8A8E3&sms=3FD9225F007C03C1&s=230AA315D5E0FCBB :514
<div id="content" class="content">
......
</div>
位置:https://www.youthtaiwan.net/css/index.css :1
@media (max-width: 800px) and (min-width: 481px) {
body>form {
background-color:#fff;
background-image: url('../images/pad_bg.jpg?1513902846');
background-repeat: no-repeat;
background-position: center 4%;
background-size: contain
}
}
@media (max-width: 480px) and (min-width: 1px) {
body>form {
background-color:#fff;
background-image: url('../images/pad_bg.jpg?1513902846');
background-repeat: no-repeat;
background-position: center 7%;
background-size: contain
}
}
@media (max-width: 800px) and (min-width: 769px) {
.content .content_middle {
margin-top:58%
}
}
@media (max-width: 768px) and (min-width: 661px) {
.content .content_middle {
margin-top:52%
}
}
@media (max-width: 660px) and (min-width: 581px) {
.content .content_middle {
margin-top:52%
}
}
@media (max-width: 580px) and (min-width: 481px) {
.content .content_middle {
margin-top:46%
}
}
@media (max-width: 480px) and (min-width: 1px) {
.content .content_middle {
margin-top:56%
}
}
位置:https://www.youthtaiwan.net/css/detail.css :1
@media (max-width: 800px) and (min-width: 769px) {
.content .content_middle {
margin-top:61%
}
}
@media (max-width: 768px) and (min-width: 661px) {
.content .content_middle {
margin-top:385px
}
}
@media (max-width: 660px) and (min-width: 481px) {
.content .content_middle {
margin-top:45%
}
}
@media (max-width: 480px) and (min-width: 321px) {
.content .content_middle {
margin-top:54%
}
}
@media (max-width: 320px) and (min-width: 1px) {
.content .content_middle {
margin-top:58%
}
}
建議修改:
使用img標籤取代使用background-image屬性
<div id="content" class="content">
<img src="../images/pad_bg.jpg?1513902846" class="bg">
......
</div>
img .bg{
display: none;
}
@media (max-width: 800px) {
body>form {
background-color:#fff;
background-image: none;
}
img .bg{
max-width: 100%
display: unset;
}
}
變更margin-top屬性值
@media (max-width: 800px) {
.content .content_middle {
margin-top: unset;
}
}
@media (max-width: 800px) and (min-width: 769px) {
.content .content_middle {
margin-top: unset;
}
}
補充: