CSS3의 새로운 단위 사용에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3의 새로운 단위 사용에 대한 자세한 설명

php中世界最好的语言

Mar 20, 2018 pm 04:36 PM

csscss3

이번에는 CSS3의 새로운 단위를 사용하는 방법에 대해 자세히 설명하겠습니다. CSS3의 새로운 단위를 사용할 때 주의사항은 무엇인가요?

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

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

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

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

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

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

(1) %는 상위 요소 vw 및 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(10월)부터 완벽 지원 2013)
Opera: 버전 15부터 완벽하게 지원됨(2013년 7월)
IE: IE10(Edge 포함)부터 여전히 부분적으로만 지원됩니다(vmax는 지원하지 않고 vm은 vmin을 대체함)

(2) 모바일 장치

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

2 간단한 예

1, 페이지 코드

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

nbsp;html>

  
    <meta>
    <title>hangge.com</title>
    <style>
      html, body, p, 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>
  
  
      <p>
          </p><h1 id="宽度-字体">宽度100％, 字体5％</h1>
      
      <p>
          </p><h2 id="宽度-字体">宽度80％, 字体5％</h2>
      
      <p>
          </p><h3 id="宽度-高度-字体">宽度50％, 高度50％, 字体1％</h3>

2, 렌더링

3. 레이어를 마스크하여 완전한 적용 범위 달성

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

1, 샘플 코드

nbsp;html>

  
    <meta>
    <title>hangge.com</title>
    <style>
      html, body, p, 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>
  
  
      <button>点击显示遮罩</button>
      <p></p>

2, 렌더링

IV. 중앙 팝업 상자 구현

1, 팝업 상자의 크기가 콘텐츠에 맞게 조정됩니다.

( 1) 효과 사진 예시

팝업 버튼을 클릭하면 전체 화면 중앙에 팝업 상자가 나타납니다.

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

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

(2) 샘플 코드

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

nbsp;html>

  
    <meta>
    <title>hangge.com</title>
    <script></script>
    <style>
      html, body, p, 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>
  
  
      <button>点击显示弹出框</button>
      <p>
          </p><p>
              </p><p>居中弹出框</p>
              <a>关闭</a>
              <p>
                <img  class="demo-image lazy" src="/static/imghwm/default1.png" data-src="logo.png" alt="CSS3의 새로운 단위 사용에 대한 자세한 설명" >
              </p>

2, 창 크기에 따라 팝업 상자 크기가 달라집니다

（1）样例效果图

点击弹出按钮后，会显示一个在整个屏幕上居中显示的弹出框。

弹出框的大小不再由内容的大小决定，而是随视窗大小改变（宽高均为屏幕可视区域的 80%）。

点击关闭按钮后，则隐藏弹出框。

（2）样例代码

遮罩层使用 vw、vh 实现全屏覆盖。而弹出框的尺寸位置同样使用 vw、vh 设置。

nbsp;html>

  
    <meta>
    <title>hangge.com</title>
    <script></script>
    <style>
      html, body, p, 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>
  
  
      <button>点击显示弹出框</button>
      <p>
          </p><p>
              </p><p>居中弹出框</p>
              <a>关闭</a>
              <p>
                <img  class="demo-image lazy" src="/static/imghwm/default1.png" data-src="logo.png" alt="CSS3의 새로운 단위 사용에 대한 자세한 설명" >
              </p>

五、显示大图时限制其最大尺寸

我们还可以通过视图单位来限制一些元素的最大宽度或高度，避尺寸过大而超出屏幕。

1，效果图

（1）点击按钮，在屏幕中央显示原始图片的大图。
（2）如果图片原始宽高均不超过屏幕宽高的 90%，则显示图片的默认大小。
（3）如果图片原始宽高均超过屏幕宽高的 90%，则限制为屏幕的 90%，使其能够完全显示。

2，样例代码

 nbsp;html>

  
    <meta>
    <title>hangge.com</title>
    <script></script>
    <style>
      html, body, p, 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;
        text-align: left;
        vertical-align: middle;
        position: relative;
      }
 
      .demo-image {
        max-width: 90vw;
        max-height: 90vh;
      }
    </style>
  
  
      <button>点击显示大图</button>
      <p>
          </p><p>
              <img  class="demo-image lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="CSS3의 새로운 단위 사용에 대한 자세한 설명" >
          </p>

六、实现 Word 文档页面效果

1，效果图
（1）使用 vh 单位，我们可把 web 页面做得像 Office 文档那样，一屏正好一页。改变浏览器窗口尺寸，每页的大小也会随之变化。
（2）拖动滚动条，我们可以一直往下看到最后一页。

2，样例代码

nbsp;html>

  
    <meta>
    <title>hangge.com</title>
    <script></script>
    <style>
      html, body, p, span, button {
        margin: 0;
        padding: 0;
        border: 0;
      }
 
      body {
        background-color: #789BC9;
      }
 
      page {
        display: block;
        height: 98vh;
        width: 69.3vh;
        margin: 1vh auto;
        padding: 12vh;
        border: 1px solid #646464;
        box-shadow: 0 0 15px rgba(0,0,0,.75);
        box-sizing: border-box;
        background-color: white;
        position: relative;
      }
 
      page:after {
        content: attr(data-page);
        color: graytext;
        font-size: 12px;
        text-align: center;
        bottom: 4vh;
        position: absolute;
        left: 10vh;
        right: 10vh;
      }
 
      a {
        color: #34538b;
        font-size: 14px;
      }
    </style>
    <script>
      $(document).ready(function(){
        var lenPage = $("page").length;
        //自动添加每页底部的页码
        $("page").each(function(i){
          $(this).attr("data-page", "第 "+ (i+1) +" 页，共 "+ lenPage +" 页");
        });
      });
    </script>
  
  
    <page><a>欢迎访问 hangge.com</a></page>
    <page></page>
    <page></page>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

핫 AI 도구

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.