0

我对 CSS 比较陌生，我一直在研究和研究这个，但我仍然非常不确定和完全困惑如何正确地为一个在具有视网膜屏幕的移动设备上工作的网站制作响应式 CSS。

当我使用 max-width 时，它无法在 iPhone 或 iPad 等视网膜设备上正确加载。它不起作用，因为这些设备的像素宽度实际上是两倍，对吧？我尝试使用and (resolution: x)东西，但这也没有真正起作用，视网膜设备只是不断加载标准 CSS。

然后我尝试了最大设备宽度。这在视网膜设备上效果很好，但现在我读到这是不鼓励的，因为它会在桌面上形成一个非流畅的网站。

那么在视网膜设备上定位宽度的正确方法是什么？我是否复制了 CSS 的那部分，并有一个用于非视网膜设备/桌面的最大宽度部分和一个仅用于视网膜设备的 css 的最大设备宽度部分？这对我来说似乎不对，但这是我能想到的唯一解决方案。

我正在尝试自定义 OJS 页面 ( https://pkp.sfu.ca/ojs/ ) 所以我只能使用单个 CSS 文件，即使编辑 html 也会有问题。因此，例如，我试图在带有视网膜的 iPhone 上查看时放大导航栏，所以我这样做：

@media (max-device-width: 768px) {

        #navbar {
            height: 50px;
        }

如果我使用 max-width，它不会增加手机导航栏的高度。

4

0 回答 0