Home > Article > Web Front-end > How to use CSS Viewport units vw and vh to implement layout that adapts to tablet and mobile screens
How to use CSS Viewport units vw and vh to implement layout that adapts to tablet and mobile screens
- PHPzOriginal
- 2023-09-13 12:26:001377browse
How to use CSS Viewport units vw and vh to implement layout adapted to tablet and mobile phone screens
When designing responsive web layout, we often need to consider different device screens Size adaptation issue. The CSS Viewport units vw (viewport width) and vh (viewport height) provide a simple way to achieve layout adaptability to tablet and mobile screens.
Viewport units vw and vh are calculated relative to the width and height of the viewport, where 1vw is equal to 1% of the viewport width and 1vh is equal to 1% of the viewport height. By using these units appropriately, we can easily control the size and position of elements in different viewport sizes.
The following will introduce in detail how to use CSS Viewport units vw and vh to implement layout that adapts to tablet and mobile phone screens.
- Set basic styles
Before starting the layout, we need to set some basic styles to ensure that the default style of the page adapts to different device screens. First, we can add the following style to the body element:
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}This eliminates the default margins and padding and sets the box model to the border box model.
- Use vw and vh units to set the element size
When designing the layout, we need to take into account the size changes of page elements under different view window sizes. At this time, you can use vw and vh units to set the size of the element.
.element {
width: 50vw; /* 宽度为视窗宽度的 50% */
height: 30vh; /* 高度为视窗高度的 30% */
}By setting the width and height to relative unit values, we can ensure that the element maintains appropriate proportions across different viewport sizes.
- Set element position using vw and vh units
In addition to setting the size of the element, we also need to consider the position of the element on the page. At this time, you can use vw and vh units to set the position of the element.
.element {
position: absolute;
left: 50vw; /* 左边距为视窗宽度的 50% */
top: 25vh; /* 上边距为视窗高度的 25% */
}By setting the left and top properties to relative unit values, we can ensure that the relative position of the element remains unchanged under different viewport sizes.
- Use media queries to adjust layout
By using media queries, we can apply different styles or layouts according to different device screen sizes.
For example, when the screen width is less than 768px, we can adjust the size and position of the element:
@media (max-width: 768px) {
.element {
width: 80vw;
height: 25vh;
left: 10vw;
top: 15vh;
}
}In this way, when the screen width is less than 768px, the size and position of the .element element will be according to the media The styles in the query are adjusted.
To sum up, by using CSS Viewport units vw and vh, we can easily achieve layout adaptability to tablet and mobile screens. By setting the size and position of elements to relative unit values and combining media queries to adapt to different device screen sizes, we can ensure that web pages present the best user experience on different devices.
Sample code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.element {
width: 50vw;
height: 30vh;
position: absolute;
left: 50vw;
top: 25vh;
background-color: red;
}
@media (max-width: 768px) {
.element {
width: 80vw;
height: 25vh;
left: 10vw;
top: 15vh;
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>The above is the method and sample code on how to use CSS Viewport units vw and vh to implement layout that adapts to tablet and mobile phone screens. I hope it will be helpful to your layout adaptation work!
The above is the detailed content of How to use CSS Viewport units vw and vh to implement layout that adapts to tablet and mobile screens. For more information, please follow other related articles on the PHP Chinese website!