我对CSS比较陌生，我一直在研究和研究这个问题，但我仍然非常不确定并且对如何正确制作适用于带有视网膜屏幕的移动设备的网站的响应式CSS感到困惑 .
当我使用max-width时，它没有工作，因为这些设备的像素宽度实际上是双倍的，对吗？我已经尝试过使用和（分辨率：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，则不会增加手机上导航栏的高度 .