Question

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

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

问题：是否有解决方案可以动态设置行高而不使用脚本。或者，是否有其他解决方案不会丢失我的工具栏？

编辑：我创建了以下非常基本的小提琴来说明我们正在做的事情。如果您将结果窗口左侧的分隔条拖动得越来越小，您将看到效果的应用方式：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>

谢谢，雅克

Answer 1

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

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

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

在移动设备上更改方向时出现HTML行高问题

1 个答案: