Question

当我尝试以横向模式打开手机时，我的网页出现了一些问题。如果它是纵向的，网页显示正常，但如果我尝试切换，我的按钮会显示在横幅上。

我的脚上有标题和按钮的横幅（但是全部是正文，不同的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;
}

我想在纵向和横向模式下在横幅和按钮之间保持相同的距离，或者如果不可能，请将横幅下方的按钮保持横向但不重叠。

Answer 1

您应该尝试媒体查询。在设计网页时，它是移动设备的最佳选择。或者你应该将元素的边距，高度和宽度改为％而不是px。 Meid查询：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

在手机中保持比例方面的网页（重叠）

1 个答案: