I don't understand how responsive images work?

Question

css

Good day. Now I decided to take a closer look at adaptive images, in particular at the picture tag, and realized that I was completely confused in them. I threw in a small example, but everything does not work at all the way I need it.
codepen.io/anon/pen/zreRWr?editors=1100
1st line: render 350x150 image if resolution is less than 768px
2nd line: output 400x150 image if resolution is less than 768px and x2 pixel density
3rd line: output 750x150 image if resolution is less than 1024px and resolution greater than 900px display it in half screen, otherwise display it in full screen
4 line: display 800x150 image at resolution less than 1024px and pixel density x2
Thanks in advance.

Answer 1

To do this, media queries are used. More details here
. And in short, there, for each screen size, their sizes are written, for example, like this.
//@media (min-width: 500px) and (max-width: 600px) {
// h1 {
// color: red;
// }
This means that if the screen size is 500px but not more than 600px, then the 'h1' color will turn red (if it is a different color in a normal request)