CSS 如何在每个设备中保持位置

Question

我正在使用 Bootstrap ，但我关闭了响应。我尝试保持我的 div 位置，即使它在其他设备中(没有响应)。

截图1普通版(1366 * 768):

nexus 10 渲染中的屏幕截图 2:

正如您在 nexus 10 中看到的那样，左右之间的距离变远了。

这是我的 html 代码:

<div class="topbar">
    <div class="navbar navbar-default" role="navigation">
        <ul class="nav navbar-nav navbar-left pull-left menu-nav">
            <li><a href="index.html" class="logo">Work</a></li>
            <li><a href="index.html" class="logo">About</a></li>
            <li><a href="index.html" class="logo">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav pull-right site-logo">
            <li>
                <img src="http://www.underconsideration.com/brandnew/archives/facebook_2015_logo_detail.png" alt="" class="logo-img">
            </li>
        </ul>
        <!--/.nav-collapse -->
    </div>
</div>

这是我的CSS:

.容器{ 宽度:100%；

.logo-img {
    max-height: 45px;
    max-width: 100%;
}

.topbar {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
}

.topbar .topbar-left {
    float: left;
    position: relative;
    width: 240px;
    z-index: 1;
}

.menu-nav {
    display: inline-block;
    float: left;
    padding: 35px 0;
    max-width: 35%;
    text-align: left;
    margin: 0 35px;
    position: relative;
    top: 0;
    z-index: 7999;
}

.menu-nav li {
    font-style: italic;
    font-weight: bold;
    color: #000;
}


.site-logo{
    display: block;
    float: right;
    padding: 35px 0;
    max-width: 35%;
    text-align: right;
    margin: 0 35px;
    position: relative;
    top: 0;
    z-index: 7999;
}

.topbar .topbar-right {
    float: right;
    position: relative;
    width: 240px;
    z-index: 1;
}

.navbar-default {
    background: #ffffff;
    border-radius: 0px;
    border: none;
    margin-bottom: 0px;
}

这可能吗？

Answer 1

如果我没理解错的话，你想要两个顶部之间的距离<ul>是否在所有设备上始终相同？

我有几点建议:

• 看看viewport units .它让您可以根据用户视口(viewport)的大小设置元素的大小。
• 也许你可以使用标准的 % ，我不知道你用的是什么。
• 你设置了<meta name="viewport" content="width=device-width">在您的 HTML header 中？它根据设备像素密度设置视口(viewport)大小。更多信息:https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag