How to use CSS Viewport unit vh to create a web page layout that adapts to mobile screens

How to use CSS Viewport unit vh to create a web page layout that adapts to mobile phone screens

The popularity and use of mobile devices is becoming more and more widespread, and more and more web pages are Adaptation to the mobile phone screen is required. To solve this problem, CSS3 introduced a new unit - Viewport unit, which includes vh (viewport height). In this article, we will explore how to use vh units to create web page layouts that adapt to mobile screens, and provide specific code examples.

1. Introduction to Viewport unit vh
Viewport refers to the area where the web page displays content in the browser window. The vh unit is a unit based on the height of the Viewport. The value of vh is a percentage relative to the Viewport height, and 1vh is equal to 1% of the Viewport height. For example, if the Viewport's height is 800 pixels, then 1vh equals 8 pixels.

2. Create a web page layout adapted to the mobile phone screen
Using the vh unit can easily create a web page layout adapted to the mobile phone screen. Several common layout methods will be introduced below.

1. Full screen layout
   Full screen layout means that the web content is displayed on the entire mobile phone screen without leaving any white edges. This can be achieved by setting the height of the html and body elements to 100vh:

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

2. Vertical center layout
   Vertical center layout means that the content is displayed vertically in the center on the mobile phone screen. You can achieve vertical centering by setting the height of the parent container to 100vh and using flex layout:

.container {
  display: flex;
  align-items: center;
  height: 100vh;
}

3. Top fixed layout
   Top fixed layout means that the content at the top of the web page is fixed on the mobile screen The top of the page does not scroll with the scroll bar. It can be achieved by setting the height of the content area to 100vh and using fixed positioning:

.container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
}

4. Adaptive image layout
   In web page production, it is often necessary to display adaptive images on the mobile phone screen picture. You can use the vh unit to set the height and width of the image to a certain proportion of the Viewport. For example, set the height of the image to 50vh and the width to 50vh to achieve adaptive image layout:

img {
  height: 50vh;
  width: 50vh;
}

3. Summary
By using the CSS Viewport unit vh, we can easily create a web page layout that adapts to the mobile screen. This article introduces several common layout methods, including full-screen layout, vertically centered layout, top fixed layout and adaptive image layout, and provides specific code examples. I hope this article can help readers better adapt to mobile screens and improve the user experience of web pages.

The above is the detailed content of How to use CSS Viewport unit vh to create a web page layout that adapts to mobile screens. For more information, please follow other related articles on the PHP Chinese website!