What is the difference between css style unit percentage and px-Front-end Q&A-php.cn

What is the difference between css style unit percentage and px

WBOY

Release： 2021-12-29 11:33:26

Original

2358 people have browsed it

Difference: 1. For ordinary elements, the percentage unit size will change as the size of the parent element changes, while the size of the px unit is fixed; 2. For fixed positioning elements, the percentage unit size will change with the browsing The size of the px unit changes depending on the size of the browser window. The size of the px unit is fixed.

What is the difference between css style unit percentage and px

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the difference between css style unit percentage and px

Pixel (px): Pixel is a fixed-size unit used for screen media (i.e. read on a computer screen).

One pixel is equal to one point on the computer screen (the smallest division of your screen resolution). Many web designers use pixel units in web documents to produce pixel-perfect renderings of websites rendered by browsers. One problem with the Pixel unit is that it does not scale for visually impaired readers to accommodate mobile devices.

% units are generally relative to the parent element, but are not very accurate.

For ordinary positioned elements, it is the parent element as we understand it. For elements with position: absolute;, it is relative to the positioned parent element. For elements with position: fixed;, it is relative to the ViewPort (visual window)

The percentage will change with the size of the browser window. px is a fixed size and should be used according to the actual situation. The two methods can be combined.

The example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width:20%;
        height:300px;
        background:pink;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copy after login

When the browser window size is changed, the output result is:

What is the difference between css style unit percentage and px

(Learning video sharing: css Video tutorial)

The above is the detailed content of What is the difference between css style unit percentage and px. For more information, please follow other related articles on the PHP Chinese website!