CSS3의 새로운 단위 vw, vh, vmin 및 vmax를 사용하는 방법-CSS 튜토리얼-php.cn

이번에는 새로운 CSS3 유닛인 vw, vh, vmin, vmax를 사용하는 방법을 알려드리겠습니다. 새로운 CSS3 유닛인 vw, vh, vmin, vmax를 사용할 때의 Notes는 무엇인가요? 한 번 살펴보겠습니다.

이 글에서는 CSS3의 새로운 단위 vw, vh, vmin, vmax의 사용에 대한 자세한 설명을 소개하고, 자세한 내용은 다음과 같습니다:

1, vw, vh, vmin, vmax의 의미

(1) vw, vh, vmin, vmax는 창 단위이자 상대 단위입니다. 이는 페이지의 상위 노드나 루트 노드와 관련이 없습니다. 뷰포트의 크기에 따라 결정됩니다. 단위는 1이며 이는 1%와 같습니다.
뷰포트는 브라우저가 실제로 콘텐츠를 표시하는 영역입니다. 즉, 도구 모음과 버튼이 없는 웹 브라우저입니다.

(2) 구체적인 설명은 다음과 같습니다.

vw: 창 너비의 백분율(1vw는 창 너비의 1%를 나타냄)
vh: 창 높이의 백분율
vmin: 현재 vw의 작은 값 and vh
vmax: 현재 vw와 vh의 더 큰 값

2, vw, vh 및 % 백분율의 차이

(1) %는 상위 요소의 크기에 상대적으로 설정된 비율, vw 및 vh는 창의 크기에 따라 결정됩니다.
(2) vw와 vh의 장점은 높이를 직접 얻을 수 있다는 점입니다. 그러나 %를 사용하면 신체 높이를 설정하지 않으면 시각 영역의 높이를 정확하게 얻을 수 없으므로 이는 좋은 장점입니다.

3. vmin 및 vmax 사용

모바일 페이지 개발 시 vw 및 wh를 사용하여 글꼴 크기(예: 5vw)를 설정하면 세로 모드와 가로 모드에서 표시되는 글꼴 크기가 달라집니다.

vmin과 vmax는 현재 더 작은 vw와 vh이고 현재 더 큰 vw와 vh이기 때문입니다. 여기서는 vmin과 vmax를 사용할 수 있습니다. 가로 및 세로 화면 모두에서 텍스트 크기를 일관되게 만듭니다.

4, 브라우저 호환성

(1) 데스크톱 PC

Chrome: 버전 26(2013년 2월)부터 완벽 지원
Firefox: 버전 19(2013년 1월)부터 완벽 지원
Safari: 버전 6.1(2013년 10월)부터 완벽 지원
Opera: 버전 15(2013년 7월)부터 완벽하게 지원됨
IE: IE10(Edge 포함)부터 여전히 부분적으로만 지원되지만(vmax는 지원되지 않음) vm이 vmin을 대체함)

(2) 모바일 장치

Android: 버전 4.4(2013년 12월)부터 완벽 지원
iOS: iOS8 버전(2014년 9월)부터 완벽 지원

2. 간단한 예

1, 페이지 코드

뷰포트 단위는 너비와 높이를 설정하는 데만 사용할 수 있는 것은 아닙니다. 요소이지만 텍스트에도 사용할 수 있습니다. 다음으로 vw를 사용하여 반응형 텍스트를 구현하기 위한 글꼴 크기를 설정합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <style>
      html, body, div, span, h1, h2, h3 {
        margin: 0;
        padding: 0;
        border: 0;
      }
  
      .demo {
       width: 100vw;
       font-size: 5vw;
       margin: 0 auto;
       background-color: #50688B;
       color: #FFF;
      }
  
      .demo2 {
       width: 80vw;
       font-size: 5vw;
       margin: 0 auto;
       background-color: #ff6a00;
      }
  
      .demo3 {
       width: 50vw;
       height: 50vh;
       font-size: 1vw;
       margin: 0 auto;
       background-color: #ff006e;
       color: #FFF;
      }
    </style>
  </head>
  <body>
      <div class="demo">
          <h1>宽度100％, 字体5％</h1>
      </div>
      <div class="demo2">
          <h2>宽度80％, 字体5％</h2>
      </div>
      <div class="demo3">
          <h3>宽度50％, 高度50％, 字体1％</h3>
      </div>
  </body>
</html>

로그인 후 복사

3. 마스크 레이어를 사용하여 완전한 커버리지

때때로 팝업 상자를 강조 표시하거나 페이지 요소가 클릭되는 것을 방지합니다. 전체 가시 영역을 덮는 반투명 마스크가 필요하며 이는 vw 및 vh를 사용하여 쉽게 얻을 수 있습니다.

1, 샘플 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <style>
      html, body, div, span, button {
        margin: 0;
        padding: 0;
        border: 0;
      }
  
      button {
        width: 120px;
        height: 30px;
        color: #FFFFFF;
        font-family: "微软雅黑";
        font-size: 14px;
        background: #28B995;
      }
  
      #mask {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: #000000;
        opacity: 0.5;
        display: none;
      }
    </style>
  </head>
  <body>
      <button onclick="document.getElementById(&#39;mask&#39;).style.display=&#39;inline&#39;">点击显示遮罩</button>
      <div id="mask" onclick="document.getElementById(&#39;mask&#39;).style.display=&#39;none&#39;"/></div>
  </body>
</html>

로그인 후 복사

4. 중앙 팝업 상자 구현

1, 팝업 상자의 크기가 콘텐츠에 맞게 조정됨

(1) 샘플 렌더링

팝업 버튼 클릭 후 을 선택하면 전체 화면에 팝업 상자가 표시됩니다. 화면 중앙에 나타나는 팝업 상자입니다.

팝업 상자의 크기는 콘텐츠(로고 그림)의 크기에 따라 조정되며, 팝업 상자 뒤에 전체 화면을 덮는 반투명 마스크 레이어가 있습니다.

닫기 버튼을 클릭하면 팝업 상자가 숨겨집니다.

(2) 샘플 코드

마스크 레이어는 vw 및 vh를 사용하여 전체 화면 적용 범위를 달성합니다. 팝오버는 마스크 레이어에 추가되고 중앙에 배치됩니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style>
      html, body, div, span, button {
        margin: 0;
        padding: 0;
        border: 0;
      }
  
      button {
        width: 120px;
        height: 30px;
        color: #FFFFFF;
        font-family: "微软雅黑";
        font-size: 14px;
        background: #28B995;
      }
  
      .dialog-container {
        display: none;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,.35);
        text-align: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
      }
  
      .dialog-container:after {
        display: inline-block;
        content: &#39;&#39;;
        width: 0;
        height: 100%;
        vertical-align: middle;
      }
  
      .dialog-box {
        display: inline-block;
        border: 1px solid #ccc;
        text-align: left;
        vertical-align: middle;
        position: relative;
      }
  
      .dialog-title {
        line-height: 28px;
        padding-left: 5px;
        padding-right: 5px;
        border-bottom: 1px solid #ccc;
        background-color: #eee;
        font-size: 12px;
        text-align: left;
      }
  
      .dialog-close {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 12px;
      }
  
      .dialog-body {
        background-color: #fff;
      }
    </style>
  </head>
  <body>
      <button onclick="$(&#39;#dialogContainer&#39;).show();">点击显示弹出框</button>
      <div id="dialogContainer" class="dialog-container">
          <div class="dialog-box">
              <div class="dialog-title">居中弹出框</div>
              <a onclick="$(&#39;#dialogContainer&#39;).hide();" class="dialog-close">关闭</a>
              <div class="dialog-body">
                <img src="logo.png" class="demo-image" />
              </div>
          </div>
      </div>
  </body>
</html>

로그인 후 복사

2. 창의 크기에 따라 팝업 상자의 크기가 변경됩니다.

(1) 샘플 렌더링

팝업 버튼을 클릭하면 전체 화면 중앙에 팝업 상자가 표시됩니다. .

팝업 상자의 크기는 더 이상 콘텐츠의 크기에 따라 결정되지 않고 창의 크기에 따라 변경됩니다(너비와 높이 모두 화면 표시 영역의 80%).

닫기 버튼을 클릭하면 팝업 상자가 숨겨집니다.

(2) 샘플 코드

마스크 레이어는 vw 및 vh를 사용하여 전체 화면 적용 범위를 달성합니다. 팝업 상자의 크기와 위치도 vw와 vh를 사용하여 설정합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style>
      html, body, div, span, button {
        margin: 0;
        padding: 0;
        border: 0;
      }
  
      button {
        width: 120px;
        height: 30px;
        color: #FFFFFF;
        font-family: "微软雅黑";
        font-size: 14px;
        background: #28B995;
      }
  
      .dialog-container {
        display: none;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,.35);
        text-align: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
      }
  
      .dialog-box {
        top:10vh;
        left:10vw;
        width: 80vw;
        height: 80vh;
        text-align: left;
        position: absolute;
        border: 1px solid #ccc;
        display: flex;
        flex-direction: column;
      }
  
      .dialog-title {
        line-height: 28px;
        padding-left: 5px;
        padding-right: 5px;
        border-bottom: 1px solid #ccc;
        background-color: #eee;
        font-size: 12px;
        text-align: left;
      }
  
      .dialog-close {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 12px;
      }
  
      .dialog-body {
        background-color: #fff;
        flex:1;
        overflow: auto;
      }
    </style>
  </head>
  <body>
      <button onclick="$(&#39;#dialogContainer&#39;).show();">点击显示弹出框</button>
      <div id="dialogContainer" class="dialog-container">
          <div class="dialog-box">
              <div class="dialog-title">居中弹出框</div>
              <a onclick="$(&#39;#dialogContainer&#39;).hide();" class="dialog-close">关闭</a>
              <div class="dialog-body">
                <img src="logo.png" class="demo-image" />
              </div>
          </div>
      </div>
  </body>
</html>

로그인 후 복사

5. 큰 이미지를 표시할 때 최대 크기를 제한합니다.

또한 너무 커서 화면을 초과하지 않도록 뷰 단위를 통해 일부 요소의 최대 너비나 높이를 제한할 수도 있습니다.

(1) 버튼을 클릭하면 화면 중앙에 원본 이미지의 큰 이미지가 표시됩니다.
(2) 이미지의 원래 너비와 높이가 화면 너비와 높이의 90%를 초과하지 않으면 이미지의 기본 크기가 표시됩니다.
(3) 이미지의 원래 너비와 높이가 화면 너비와 높이의 90%를 초과하는 경우 완전히 표시될 수 있도록 화면의 90%로 제한됩니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!