Question

我对CSS相对较新，而且我一直在研究和研究这个问题，但我仍然非常不确定并且对于如何为可以使用的网站正确制作响应式CSS感到非常困惑具有视网膜屏幕的移动设备。

当我使用max-width时，它不能正确加载到iPhone或iPad等视网膜设备上。它不起作用，因为这些设备的像素宽度实际上是双倍的，对吗？我尝试过使用和（resolution：x）这个东西，但这也没有用，视网膜设备只是不断加载标准CSS。

然后我尝试了max-device-width。这在视网膜设备上运行得很好，但现在我读到的是不鼓励的，因为它会在桌面上形成一个非流畅的网站。

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

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

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

        #navbar {
            height: 50px;
        }

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