Those are the predefined media queries I mentioned above. Media queries are used to adjust the site display, based mainly on the viewport width, mostly for mobile devices. They are used in the theme default style.css and responsive.css files. The media queries in the child theme style.css file don’t currently contain any styles but they can be used for your own custom code. Say, for example, that you had some content that you wanted to display in red on mobile devices. The code in your post might look like this:
<p class="mystyle">This is some red content on mobile devices</p>
Then, in your child theme style.css, you would select the appropriate media query that affects the devices you want to target. In this case, maybe all devices with a screen width smaller than 720px (mostly phones). So you’d select this media query:
@media only screen and (max-width: 719px)
and add your style:
.mystyle { color: #f00; }
And end up with this:
/* Mobile - 480px & 320px */
@media only screen and (max-width: 719px) {
.mystyle { color: #ff0; }
}
This tells WP that, for all devices with a screen width up to (max-width) 719px, the content color would be red. Anything with a width of 720px or greater, the content would be the default color.
There are many tutorials online that discuss media queries. This one is a good starting point.