웹 개발에 px 또는 rem을 사용해야 합니까?-CSS 튜토리얼-php.cn

웹 개발에 px 또는 rem을 사용해야 합니까?

清浅

풀어 주다： 2019-04-09 10:19:50

원래의

3087명이 탐색했습니다.

px는 고정 크기에 사용되는 단위로 주로 PC 페이지에 사용되는 반면, rem은 HTML 루트 요소에 상대적인 단위로 간단한 모바일 페이지에 적합합니다. 프로젝트에서는 특정 개발 요구 사항에 따라 가장 적합한 길이 단위를 선택해야 합니다

프론트 엔드 개발에서는 CSS의 많은 속성이 길이 단위에 의존하여 표시되어야 하기 때문에 CSS의 길이 단위는 필수적입니다. 다음으로 널리 사용되는 두 가지 길이 단위인 rem과 px에 대해 소개하겠습니다. [추천 과정:

웹 개발에 px 또는 rem을 사용해야 합니까? CSS 튜토리얼

] pxpx는 모니터 화면 해상도를 기준으로 하는 픽셀을 의미합니다. px로 글꼴 크기를 설정하면 효과가 더욱 안정적이고 정확해집니다. 그러나 px를 사용하는 데에는 몇 가지 문제가 있습니다. 예를 들어 IE 브라우저는 px를 단위로 사용하는 글꼴 크기를 조정할 수 없으므로 장치 화면 크기로 인해 페이지 효과가 변경됩니다. CSS3의 새로운 상대 요소. 요소의 글꼴 크기를 설정하기 위해 rem을 사용할 때 이 단위는 HTML 루트 요소를 기준으로 합니다. rem을 통해 루트 요소만 수정하면 모든 글꼴의 크기가 비례적으로 조정되며 동시에 글꼴 크기가 레이어별로 합성되는 연쇄 반응을 피할 수 있습니다.

예:

!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 用px单位-->
px:<p style="font-size:14px; text-indent:28px">
我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字</p>
 
<!-- 用rem单位，当前html的字体大小是16px-->
rem:<p style="font-size:14px; text-indent:1.75rem">
我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字</p>
</body>
</html>

로그인 후 복사

렌더링은 다음과 같습니다.

px와 rem 중에서 선택하는 방법

px는 고정 크기에 적합하며 주로 PC 페이지에 사용되지만 rem은 더 적합합니다. 모바일 페이지

rem은 같은 크기의 콘텐츠를 다양한 크기의 화면에 표시하는 기능을 구현하지만 사용자는 화면 크기가 변경됨에 따라 페이지 효과를 변경해야 하는 경우가 많기 때문에 복잡한 페이지에서는 rem이 아무런 이점이 없습니다

그래서 개발할 때 우리는 실제 개발 상황에 따라 결정해야 합니다. 예를 들어 일부 프로젝트는 PC 측에만 표시되어야 하며 px를 길이 단위로 사용할 수 있습니다. 일부 프로젝트는 반응형 개발이 필요하며 이는 특정 상황에 따라 다릅니다. 요약 : 위 내용은 이 글의 전체 내용입니다. 모든 분들께 도움이 되었으면 좋겠습니다. 웹 개발에 px 또는 rem을 사용해야 합니까?