Question

我在大型视网膜显示器上显示我的网站时遇到问题。在桌面和移动设备上它运行良好，但在MacBook视网膜屏幕上，它看起来很大，并不适合浏览器。有没有办法让.container看起来具有相同的宽度和高度，并在所有设备和所有屏幕（）上方左上浮？

<body> <div class="container"> <nav> </nav> </div> </body>

这是网站：www.pctutorials.16mb.com

以下是代码：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 0;
}

html {
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    position: relative;
    float: left;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:none;
}

p {
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: normal;
    color: white;
}

.container {
    width: 2000px;
    height: 1080px;
    position: relative;
    float: left;
    overflow: hidden;
    background: url("images/background.jpg") no-repeat top left;
    background-size: 2000px 1080px;
}

Answer 1

首先，您设置了.container和width的固定值height。 nav元素也是如此。

此是您的网页无法放入MacBook（以及几乎所有其他笔记本电脑，视网膜或非）的原因。

为了解决这个问题，我先从：

开始

.container {
    width: 100%;
    height: 100%;
    ...
}

和

nav {
    height: 100%;
    ...
}

然后，您需要使用.nav-menu，这可能会在较小的屏幕上被切断。可悲的是，如果不稍微使用媒体查询，你就无法解决这个问题。

HTML＆amp;在Retina 2800x2000上CSS显示错误

1 个答案: