CSS Screen Height

In web design and development, we often need to adjust and optimize page layouts based on the screen height of the user’s device. CSS provides some methods to set styles according to screen height. This article will introduce in detail how to use CSS to get and set the screen height.

1. Using the `vh` Unit

In CSS, the vh unit represents a percentage of the viewport height. A vh value is equal to a percentage of the viewport height. Using the vh unit allows you to set element sizes based on the viewport height, achieving screen-height responsiveness.

.element {
height: 100vh; /* Sets the element's height to 100% of the screen's height */
background-color: #f2f2f2;
}

In the above example, we set the height of .element to 100% of the screen’s height, making the element take up the entire screen.

2. Getting the Screen Height Using JavaScript

In addition to using the CSS vh unit to set the element’s height, we can also use JavaScript to get the user’s device’s screen height and dynamically style the element based on the obtained height.

let screenHeight = window.innerHeight;
console.log(screenHeight); // Print screen height

In the above example, we use window.innerHeight to obtain the current window’s viewport height, i.e., the screen height. By applying this value to a style sheet, we can customize the element’s display based on the screen height.

3. Media Queries

In addition to directly setting an element’s height as a percentage of the screen height, we can also use media queries to apply different styles based on different screen heights. Using media queries, we can customize the style based on the screen height, thus achieving screen-height responsiveness.

@media screen and (max-height: 600px) {
/* Styles applied when the screen height is less than 600px */
.element {
height: 50vh;
background-color: #e0f2f1;
}
}

@media screen and (min-height: 600px) and (max-height: 900px) {
/* Styles applied when the screen height is between 600px and 900px */
.element {
height: 70vh;
background-color: #ffccbc;
}
}

@media screen and (min-height: 900px) {
/* Styles applied when the screen height is greater than 900px */
.element {
height: 90vh;
background-color: #ffe0b2;
}
}

In the example above, we use media queries to set different styles based on different screen heights. When the screen height is less than 600px, the element height is 50vh and the background color is #e0f2f1; when the screen height is between 600px and 900px, the element height is 70vh and the background color is #ffccbc; when the screen height is greater than 900px, the element height is 90vh and the background color is #ffe0b2. Using media queries, we can apply different styling effects based on different screen heights.

4. Sample Code

The following is a simple sample code that demonstrates how to use the vh unit and media queries to achieve different styles based on screen height:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS screen height example</title> 
<style> 
.element { 
width: 100%; 
text-align: center; 
color: #fff; 
font-size: 24px; 
padding: 20px; 
} 

@media screen and (max-height: 600px) { 
.element { 
height: 50vh; 
background-color: #e0f2f1; 
} 
} 

@media screen and (min-height: 600px) and (max-height: 900px) { 
.element { 
height: 70vh; 
background-color: #ffccbc; 
} 
} 

@media screen and (min-height: 900px) {
.element {
height: 90vh;
background-color: #ffe0b2;
}
}
</style>
</head>

<body>
<div class="element">

Setting different styles based on screen height
</div>
</body>
</html>

In the example code above, we create a .element element and apply different styles based on screen height. By setting different styles within different screen height ranges, we can optimize page layout and display based on screen height.

Conclusion

Through this article, we’ve learned how to use the CSS vh unit, JavaScript to obtain screen height, and media queries to set different styles based on screen height. In real-world development, optimizing page layout and display based on the user’s device screen height is crucial. By flexibly utilizing CSS and JavaScript, we can achieve screen-height responsiveness, improving user experience and page performance.