我在大型视网膜显示器上显示我的网站时遇到问题。在台式机和移动设备上运行良好，但在 MacBook 视网膜屏幕上它看起来很大并且不适合浏览器。有没有办法让 .container 在所有设备和所有屏幕上看起来具有相同的宽度和高度并 float 在左上角 ()？
<body> <div class="container"> <nav> </nav> </div> </body>
代码如下:
* {
-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;
}
最佳答案
首先，您将 .container 设置为 width 和 height 的固定值。 nav 元素也是如此。
这就是为什么您的网页不适合 MacBook(以及几乎所有其他笔记本电脑，视网膜与否)。
要解决这个问题，我将从:
.container {
width: 100%;
height: 100%;
...
}
和
nav {
height: 100%;
...
}
然后，您需要使用 .nav-menu，它可能会在较小的屏幕上被截断。遗憾的是，如果不稍微尝试一下媒体查询，就无法解决这个问题。
关于HTML 和 CSS 在 Retina 2800x2000 上显示错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30900630/