How to set max-width on images on bigger devices without destroying the look on Retina-screens?

Question

I've been googling but lost myself in complicated explanations. And then I thought that someone in here might be able to help. :) I've set up a web-page which contains both a mobile-version and a computer-version.

I'm happy with how most of it looks on all media-devices I've tried. Although I have some elements where I want to set a max-width for bigger screens. It's only some elements containing images, not text. Basically, the images become too big on big screens!

I get how to set a max-width for "@media screen and (min-width: XXXpx)" BUT how do I also include retina-screens in this? I don't want small retina-screens to be affected by this, only big ones...

Is there a simple solution for this?

I.e.:

.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;
}

Clearification:

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;
}

What I then want is to set a max-width on "single_image_container" and enlarge the margin on the project_description when viewed on bigger screens.

Answer 1

There are resolution media queries, min-resolution and max-resolution. Adding the screen width is optional.

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

CSS Tricks has a good article on it.