0
我使用媒體查詢，以便使我的網站「自適應」 - 當我恢復了我的瀏覽器窗口，並削減它的大小 - 一切正常，但在移動 - 網頁顯示不正確，作爲一個完整的桌面版本，但有錯誤。媒體查詢不工作的手機
我在想這樣的問題：當你進入我的網站時，你會發現它可以向右滾動，當這個區域中顯然沒有元素時（顯示或隱藏），但是我不能擺脫這種滾動空間：提前/
謝謝，對不起，這樣一個混亂的問題。
這裏的網站：spalshmedia（點）我
這裏的CSS：
body {
background-image: url("../images/background.jpg");
background-size: 20%;
background-repeat: repeat;
}
#page_wrap {
width: 1000px;
margin: 0 auto;
position: center absolute;
}
.button {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.button:hover {
-webkit-filter: contrast(140%);
}
.websites {
border: 0.8px solid #666666;
}
#bg_first {
position: relative;
left: 0px;
top: 100px;
z-index: 1;
}
#bg_second {
position: relative;
left: 0px;
top: 25px;
z-index: 1;
}
#header {
width: 1000px;
margin:0 auto;
text-align:left;
position: center absolute;
overflow: hidden;
}
#headerbg {
position: absolute;
margin-top: 100px;
z-index: 2;
}
#glass_upper_left {
position: absolute;
margin-left: -400px;
margin-top: -240px;
z-index: 2;
}
#logo {
position: absolute;
padding-left: 50px;
top: 100px;
z-index: 3;
}
#generic_ideas {
position: absolute;
margin: 200px 300px;
z-index: 3;
}
#welcome_page {
position: absolute;
width: 500px;
margin-left: 10%;
margin-top: -600px;
z-index: 10;
}
#about_page {
position: absolute;
width: 600px;
margin-left: 10%;
margin-top: -275px;
z-index:10;
}
#services_page {
position: absolute;
width: 400px;
margin-left: 10%;
margin-top: 100px;
z-index: 10;
}
#rates_text {
position: absolute;
margin-left: -25px;
}
#contact_page {
position: absolute;
margin-left: 475px;
margin-top: 175px;
z-index: 10;
}
#contact_info {
position: absolute;
width: 800px;
height: 500px;
}
#navigation {
float: left;
position: fixed;
top: 400px;
left: 15px;
z-index: 4;
}
#menu_bg {
position: fixed;
width: 160px;
top: 370px;
left: 0px;
z-index: 3;
}
#footer_bg {
position: absolute;
margin-top: -100px;
margin-left: 0px;
z-index: 2;
}
#copyright {
position: absolute;
margin-top:-25px;
margin-left: 30px;
z-index: 10;
}
@media screen and (max-width: 1200px) {
nav, #menu_bg {
display:none;
}
#logo {
position: absolute;
padding-left: 30%;
}
#generic_ideas {
position: absolute;
margin: 200px 27%;
z-index: 3;
}
}
@media screen and (max-width: 720px) {
nav, #menu_bg {
display: none;
}
#generic_ideas {
position: absolute;
margin: 200px 70px;
z-index: 3;
-webkit-transform: scale(1.5); /* Saf3.1+, Chrome */
-moz-transform: scale(1.5); /* FF3.5+ */
-ms-transform: scale(1.5); /* IE9 */
-o-transform: scale(1.5); /* Opera 10.5+ */
transform: scale(1.5);
/* IE6–IE9 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}
#bg_first {
position: relative;
margin-left: 0px;
top: 100px;
z-index: 1;
}
#bg_second {
position: relative;
margin-left: -200px;
top: 25px;
z-index: 1;
}
#logo {
position: absolute;
padding-left: 10%;
}
#generic_ideas {
position: absolute;
margin-top: 200px;
margin-left: 5%;
z-index: 3;
}
#welcome_page {
position: absolute;
width: 400px;
margin-left: 10%;
margin-top: -650px;
z-index: 10;
}
#about_page {
position: absolute;
width: 450px;
margin-left: 10%;
margin-top: -375px;
z-index:10;
}
#services_page {
position: absolute;
width: 400px;
left: 10%;
top: 850px;
z-index: 10;
}
#web_design_title {
position: relative;
margin-left: 115px;
}
#rates_text {
position: absolute;
width: 400px;
margin-left: -10%;
margin-top: 190px;
}
#contact_page {
position: absolute;
margin-left: 475px;
margin-top: 175px;
z-index: 10;
}
#contact_info {
position: absolute;
width: 800px;
height: 500px;
margin-left: -500px;
margin-top: 240px;
}
}
有沒有足夠的代碼在這裏重現該問題。 – cimmanon
這是完整的CSS代碼。我需要後置HTML代碼或者你可以看看它直接從網站？謝謝你的關注，先生！ –
我認爲你需要爲480像素（橫向）移動，從而最大寬度和最小寬度320像素（縱向）的另一個媒體查詢 –