-1
가로 모드로 휴대 전화를 켜려고 할 때 웹 페이지에 문제가 있습니다. 인물 사진 인 경우 웹 페이지는 정상적으로 표시되지만 전환하려고하면 배너 위에 배너가 표시됩니다.휴대 전화의 가로 세로 비율 웹 페이지 유지 (겹침)
나는 발에서 헤더와 버튼의 배너를 가지고 (그러나 몸에 모두가 diferents div를)
이 내 코드입니다 :
<body>
<div data-role="page" id="home" >
<div data-role="content">
<h2 id="banner">WebPage</h2>
<div class="main_menu">
<ul data-inset="true" data-role="listview">
<li data-theme = "a"><a href="#button1">Button 1</a></li>
<li data-theme = "a"><a href="#button2">Button 2</a></li>
<li data-theme = "a"><a href="#button3">Button 3</a></li>
<li data-theme = "a"><a href="#button4">Button 4</a></li>
<li data-theme = "a"><a href="#button5">Button 5</a></li>
</ul>
</div> <!-- /main_menu -->
</div> <!-- /content -->
</div> <!-- /page -->
</body>
내 CSS :
h2#banner {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:transparent url(icons/banner1.png) no-repeat left 10px;
width:146px;
height:162px;
margin:-10px auto -150px auto;
text-indent:-9999px;
}
.main_menu{
position:fixed;
width:93%;
height:0px;
bottom:250px;
}
/* Home page banner landscape */
.landscape h2#banner {
background:transparent url(../img/banner/banner-landscape.jpg) no-repeat left 10px;
width:333px;
height:290px;
margin:-10px auto -175px auto;
text-indent:-9999px;
}
세로 모드와 가로 모드에서 배너와 버튼 사이에 같은 거리를 유지하고 싶지 않거나 가능하지 않은 경우 버튼을 가로 아래 배너에 그대로 두지 만 겹치지 않게하십시오.
미디어 쿼리를 사용해보세요. – vishalkin
나는 그게 뭔지 모르겠다. 예를 들어 주시겠습니까? – Biribu