'How to scale down all elements sizes, font sizes to smaller screens as if zoomed out to 75%

For example, if the user has a 1920x1080 monitor, it should be 100% zoomed, but for smaller monitors such as 1020x720, all elements should be like they are 75% zoomed out to retain my intended design.

How can I achieve it? I've tried using em, and rem for sizes, I also tried media queries.. but nothing seems to work.

I'm just asking for general advice as I've searched and read a lot of articles, but none of it seems to have what I'm looking for or I can't make it to work.

htmlcss


Solution 1:[1]

@media only screen and (max-width: 1020px) and (max-height: 720px) {
    font-size: .75em;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mahdyar

Related Questions