0

ウェブサイトを「アダプティブ」にするためにメディア クエリを使用します。ブラウザのウィンドウを復元してサイズを縮小すると、すべてが機能しますが、モバイルでは、ウェブサイトが完全なデスクトップ バージョンとして正しく表示されませんが、エラーが発生します。

これが原因で問題が発生したと考えています:私のウェブサイトに入ると、その領域に明らかに要素(表示または非表示)がない場合、右にスクロールできることがわかりますが、取得できませんこのスクロール可能なスペースを取り除きます:/

よろしくお願いします。

ウェブサイトはこちら:spalshmedia(dot)me

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;
}

}
4

1 に答える 1

2

画面幅が 720px 以上の場合と 1200px 以上の場合にレイアウトの変更を生成するメディア クエリのみが表示されます。画面の小さいデバイスを対象とするメディア クエリを追加する必要があるようです。詳細については、このリンクを試してください: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

于 2013-10-09T21:49:16.010 に答える