1

对于我们的移动网站，我们有一个固定在屏幕底部的工具栏。当用户将方向切换为横向时，我们将工具栏向上翻转并将其固定到屏幕的右侧。

问题是，虽然在底部，很容易建立一个固定的行高，以确保图像在每个按钮中显示为中心。但在右侧，按钮的高度会有所不同，因为按钮是使用百分比设置的。

问题：有没有一种解决方案，我可以在不使用脚本的情况下动态设置行高。或者，是否有不涉及丢失工具栏的替代解决方案？

编辑：我创建了以下非常基本的 Fiddle 来说明我们在做什么。如果您将分隔条拖到结果窗口左侧越来越宽，您将看到效果是如何应用的：http: //jsfiddle.net/BMD8z/

<div id="target-mobile">
    <div class="panel menu-track">track form</div>
    <div class="panel menu-phone"> <a href="tel:800-000-0000">Click to Call (800-000-0000)</a>

    </div>
    <div class="panel menu-search">Search box</div>
    <div id="toolbar">
        <div class="container_12 clearfix">
            <div class="grid_3"><a href="/ship" class="menu-ship button-red">ship</a>
            </div>
            <div class="grid_3"><a href="#" class="menu-track button-blue">track</a>
            </div>
            <div class="grid_2"> <a href="#" class="menu-phone">
                        <img src="http://bounce.nedoweb.com/Sitefinity/WebsiteTemplates/Default/App_Themes/Default/Images/mobile/icon-phone.png" alt="Click here to call us" /></a>

            </div>
            <div class="grid_2"> <a href="#" class="menu-search">
                        <img src="http://bounce.nedoweb.com/Sitefinity/WebsiteTemplates/Default/App_Themes/Default/Images/mobile/icon-search.png" alt="Click here to search the site" /></a>

            </div>
            <div class="grid_2"> <a href="#" class="menu-menu">
                        <img src="http://bounce.nedoweb.com/Sitefinity/WebsiteTemplates/Default/App_Themes/Default/Images/mobile/icon-menu.png" alt="Click here for the site menu" /></a>

            </div>
        </div>
    </div>
</div>
<div class="panel menu-menu clearfix">
    <ul>
        <li>menu 1</li>
        <li>menu 2</li>
    </ul>
</div>

谢谢， 雅克

4

1 回答 1

0

您可以使用媒体查询根据设备方向将不同的 CSS 规则应用于您的内容。

@media screen and (orientation:portrait) {
    // portrait styles
}

@media screen and (orientation:landscape) {
    // landscape styles
}
于 2013-07-08T12:36:59.363 回答