Implementation of highly adaptive full screen with CSS

Time:2022-1-11

In the process of writing your own demo, you want to use display: flex to achieve vertical centering. The code is as follows:


<style>
    #login{
        width:100%;
        height: 100%;
        display: flex; 
        justify-content: center;
        align-items: center;
    }
    .login-body{
        width: 600px;
        height: 260px;
        border: 1px solid #000;
    }
</style>

It can’t achieve the effect I want. The height of the outer parent element doesn’t occupy the whole screen..

已经横向居中,login的高度并不是整个屏幕的高度

Solution: give #login a min height: 100vh, cooperate with display: Flex; justify-content: center; align-items: center; Achieve vertical centering.


<style>
    #login{
        width:100%;
        min-height: 100vh;
        display: flex; 
        justify-content: center;
        align-items: center;
    }
    .login-body{
        width: 600px;
        height: 260px;
        border: 1px solid #000;
    }
</style>

此时#login的高度自适应整个屏的高度

Viewport units

What are viewports?

On the desktop side, the viewport refers to the visible area of the browser on the desktop side; On the mobile side, it involves three viewports: layout viewport, visual viewport and ideal viewport.

The “viewport” in the viewport unit, and the desktop refers to the visual area of the browser; The mobile terminal refers to the layout viewport in the viewport, and the “viewing area” refers to the size of the viewing area inside the browser, i.e. window innerWidth/window. Innerheight size, excluding the size of the browser area of the taskbar title bar and the bottom toolbar..

According to CSS3 specification, viewport units mainly include the following four:

1. VW: 1vw is equal to 1% of the viewport width and the viewport width is 100vw.

2. VH: 1vh is equal to 1% of the viewport height, and the viewport height is 100vh.

3. Vmin: select the smallest of VW and VH.

4. Vmax: select the largest of VW and VH.

This is the end of this article about the implementation of highly adaptive CSS covering the whole screen. For more relevant highly adaptive CSS content, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!