CSS3 @media judges both width and height

definition

Using @media query, you can define different styles for different media types.
@media can set different styles for different screen sizes , especially if you need to design a responsive page, @media is very useful.
When you reset the browser size, the page will be re-rendered according to the width and height of the browser.

use

If you need  to judge the width and height at the same time , you can use the  and  operator.

The following code judges that the  height is less than 500px and the width is greater than 600px

@media screen and (max-height: 500px) and (min-width:600px){
    
    .toc{
        display:none
    }
    
    header, main {
            margin-left: 2em;
            margin-bottom: 3em;
    }
}