如何在更大尺寸的设备上设置图像的最大宽度而又不破坏视网膜屏幕的外观？

问题描述

我一直在搜寻，但在复杂的解释中迷失了自己。然后我认为这里的某人可能会提供帮助。 :) 我已经建立了一个网页，其中包含移动版本和计算机版本。

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

我如何为“ @media屏幕和（最小宽度：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;
}

然后我想要在“ single_image_container”上设置最大宽度，并在较大的屏幕上查看时扩大project_description上的边距。

解决方法

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

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

CSS技巧上有一个good article。

media-queries retina-display