How to set media queries for high resolution screens in html - css

Question

I have a query. How to set media queries for high-resolution screens like 4k, 5k, retina display etc. As I have been reading about it, I understood we can use resolution specific media queries. But I have a query of how to understand the breakpoints for 4k 5k screens and how to know they reliability towards future high-resolution screens.
Can anyone suggest how to use CSS for high res screens?

Answer 1

If you will use relative units (em, or rem) it will give you a possibility to equal scaling for elements, and to write a minimum media queries.
EDITED:
You can see how to use em on this example:
.parent {
background: red;
font-size: 20px;
padding: 1em;
}
.child {
margin: 1em;
font-size: 15px;
}
.childOfChild {
margin-left: 1em;
font-size: 2em;
}
<div class="parent">
<h2 class="child">
Hello World!
<span class="childOfChild">Some Text</span>
</h2>
</div>
You can see how to use rem on this example:
html {
font-size: 16px;
}
.child {
font-size: 1rem;
padding: 1rem;
background: blue;
color: white;
}
.childOfChild {
font-size: 0.8rem;
margin-left: 1.2rem;
}
#media (min-width: 2000px) {
html {
font-size: 20px;
}
}
#media (max-width: 1200px) {
html {
font-size: 14px;
}
}
#media (max-width: 768px) {
html {
font-size: 12px;
}
}
<div class="parent">
<h2 class="child">
Hello World!
<span class="childOfChild">Some Text</span>
</h2>
</div>