1, rem
rem은 루트 요소의 크기를 기준으로 설정됩니다. 웹 페이지는 html입니다. html의 글꼴 크기를 설정하여 rem의 크기를 제어할 수 있습니다. 예를 들면 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
html{
font-size:20px; }
p{
width: 600px;
overflow: hidden;
line-height: 1;
font-size: 1rem; }
</style></head> <body>
<p> 是啊啊啊
</p></body></html> HTML 루트 요소에 글꼴 크기:20px;을 설정하면 1rem = 20px입니다. 마찬가지로 10px를 설정하면 1 rem = 10px를 글꼴 크기에만 사용할 수 없습니다. 너비와 같은 길이 단위에도 사용할 수 있습니다. 이때 어떻게 하면 이런 반응성을 얻을 수 있을까? 따라서 @media를 결합하여 html 루트 요소의 크기를 설정해야 합니다. 그러면 페이지의 모든 해당 rem 단위가 루트 요소를 따르게 됩니다. 예: html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !important; } } @media only screen and (min-width: 481px){ html { font-size: 30px !important; } } @media only screen and (min-width: 569px){ html { font-size: 35px !important; } } @media only screen and (min-width: 641px){ html { font-size: 40px !important; } }
그렇지 않으면 HTML의 글꼴 크기를 설정할 때 16px가 기본으로 사용됩니다. px에 비해 이 방법의 장점은 분명합니다. 각 요소에 @media를 적용할 필요가 없으며 HTML 루트 요소에 대해 서로 다른 크기만 설정하면 됩니다. 호환성도 매우 좋습니다.
2.vw, vh
rem 단위는 여전히 매우 간단하지만 아직 충분히 단순하지도 않고 조잡하지도 않습니다. vw 및 vh 단위.
뷰포트를 기준으로 한 너비입니다. 뷰포트는 vw 단위로 100개로 나누어집니다. 예를 들어 1vw는 화면 너비의 1%에 해당합니다. 예제 바로가기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
width: 20vh;
height: 30vw;
line-height: 1;
font-size: 1vw;
background: #FC8B53;
color: #fff;
}
</style>
</head>
<body>
<p>
是啊啊啊
</p>
</body>
</html>를 이렇게 설정하고 나면 p의 너비는 화면 높이에 따라 변하고, 높이도 화면 너비에 따라 변하며, 글꼴 크기도 화면에 따라 변합니다. vw 유닛의 유연성을 좀 더 직관적으로 표현하기 위해 이렇게 했습니다. 더 이상 지저분한 @media 항목을 작성하지 않아도 됩니다. 유연한 방법이란 무엇인가요? 예를 들어 p의 너비를 화면의 50%로 설정하면 너비는 50vw가 됩니다. 이때 높이를 너비의 50%로 설정해야 합니다. vw를 사용하지 않으면 어떻게 되나요? js만 사용하여 계산할 수 있습니다. 하지만 vw를 사용할 때는 25vw로 설정하면 괜찮습니다.
그러나 일부 호환성 문제가 있습니다. Android 휴대폰에 제공되는 브라우저는 Android 4.4 이상이 필요하며, 함께 제공되는 브라우저에만 문제가 있습니다. 하지만 아직도 Android에 내장된 브라우저를 사용하여 플레이하는 사람이 어디에서도 찾을 수 없나요? 따라서 vw와 vh를 사용하십시오.
