如何在不破坏Retina屏幕外观的情况下，在更大的设备上设置图像的最大宽度

Question

我一直在谷歌上搜索，但陷入了复杂的解释中。然后我想这里可能有人能帮忙。：(我已经建立了一个网页，其中包含移动版和计算机版。

我对我尝试过的所有媒体设备上的大部分内容感到满意。尽管我有一些元素，我想为更大的屏幕设置最大宽度。它只是一些包含图像的元素，而不是文本。基本上，大屏幕上的图像太大了！

我知道如何设置"的最大宽度@媒体屏幕和(最小宽度：XXXpx("；但是我该如何将视网膜屏幕也包括在内呢？我不希望小的视网膜屏幕受到影响，只有大的。。。

有简单的解决方案吗？

即：

.singel_image_container {
display: inline-block;
width: 60vw;
margin-bottom: 7vh;
margin-left: 2vw;
}
@media screen and (min-width: 1200px) {
display: inline-block;
width: 40vw;
margin-bottom: 7vh;
margin-left: 12vw;
}

澄清：

HTML:

<div class="singel_image_container">
<img class="landscape_image" src="img/alven/1.jpg">
</div>
<div class="project_description">
<h2><i>Ädno / Älven / The River</i> Blablabla</h2>
</div>

CSS：

.project_description {
float: right;
width: 34vw;
margin-right: 2vw;
}
.singel_image_container {
display: inline-block;
width: 60vw;
margin-bottom: 7vh;
margin-left: 2vw;
}

然后我想要的是在"0"上设置最大宽度；single_image_container"；当在更大的屏幕上观看时，放大project_description上的边距。

Answer 1

有解析媒体查询min-resolution和max-resolution。添加屏幕宽度是可选的。

@media only screen and (min-resolution: 300dpi) and (min-width: 1300px) {     
.singel_image_container {
width: 60vw;
}
}

CSS技巧有一篇关于它的好文章。