CSS 스타일 단위 백분율과 px의 차이점은 무엇입니까-프런트엔드 Q&A-php.cn

CSS 스타일 단위 백분율과 px의 차이점은 무엇입니까

WBOY

풀어 주다： 2021-12-29 11:33:26

원래의

2383명이 탐색했습니다.

차이: 1. 일반 요소의 경우 백분율 단위 크기는 상위 요소의 크기에 따라 변경되지만 px 단위의 크기는 고정됩니다. 2. 고정 위치 지정 요소의 경우 백분율 단위 크기는 크기에 따라 변경됩니다. 브라우저 창의 변경에 따라 px 단위의 크기가 고정됩니다.

CSS 스타일 단위 백분율과 px의 차이점은 무엇입니까

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 스타일 단위 백분율과 px

픽셀(px)의 차이점은 무엇인가요? 픽셀(px): 픽셀은 화면 미디어(예: 컴퓨터 화면에서 읽기)에 사용되는 고정 크기 단위입니다.

1픽셀은 컴퓨터 화면의 한 지점(화면 해상도의 가장 작은 부분)과 같습니다. 많은 웹 디자이너는 웹 문서에서 픽셀 단위를 사용하여 브라우저에서 렌더링되는 웹 사이트의 완벽한 픽셀 렌더링을 생성합니다. Pixel 장치의 한 가지 문제점은 시각 장애가 있는 독자가 모바일 장치에 맞게 확장할 수 없다는 것입니다.

% 단위는 일반적으로 상위 요소에 상대적이지만 그다지 정확하지는 않습니다.

일반적인 위치 지정 요소의 경우 위치가 절대;인 요소의 경우 위치가 고정된 요소의 경우 ViewPort(시각적)를 기준으로 합니다.

백분율은 브라우저 창의 크기에 따라 달라지며, px는 고정된 크기이므로 실제 상황에 따라 두 가지 방법을 조합하여 사용할 수 있습니다.

예제는 다음과 같습니다.

<!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>

로그인 후 복사

브라우저 창 크기를 변경했을 때의 출력 결과:

CSS 스타일 단위 백분율과 px의 차이점은 무엇입니까