Setting element Height -different device sizes

I am able to set element height but it only sets for the selected device for example if i set it for mobile it does not set the same for other devices. Is this expected ? I can see @media in the styles.css which seems to be setting the height differently for different devices.

While designing elements say as a %, for example header should be 20% of total height , should we do this for every device or is there a way to do it for all devices? I’m a new user and I’m trying to understand how elements placing height etc work .