So verwenden Sie die neuen CSS3-Einheiten vw, vh, vmin und vmax-CSS-Tutorial-php.cn

Dieses Mal zeige ich Ihnen, wie Sie die neuen CSS3-Einheiten vw, vh, vmin und vmax verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung der neuen CSS3-Einheiten vw, vh, vmin und vmax? Schauen wir uns hier praktische Fälle an.

Dieser Artikel stellt die Verwendung der neuen CSS3-Einheiten vw, vh, vmin und vmax vor und teilt sie mit allen. Die Details sind wie folgt:

1 Die Bedeutung von vw, vh, vmin und vmax

(1) vw, vh, vmin, vmax sind Fenstereinheiten und relative Einheiten. Es ist nicht relativ zum übergeordneten Knoten oder zum Stammknoten der Seite. Sie wird durch die Größe des Ansichtsfensters bestimmt. Die Einheit ist 1, was etwa 1 % bedeutet.
Der Ansichtsbereich ist der Bereich, in dem Ihr Browser tatsächlich Inhalte anzeigt – mit anderen Worten, Ihr Webbrowser ohne Symbolleisten und Schaltflächen.

(2) Die spezifische Beschreibung lautet wie folgt:

vw: der Prozentsatz der Fensterbreite (1vw stellt 1 % der Fensterbreite dar)
vh: der Prozentsatz des Fensters Höhe
vmin: aktuell Der kleinere Wert von vw und vh
vmax: Der größere Wert von aktuell vw und vh

2, die Differenz zwischen vw, vh und % Prozent

(1)% Dies ist das eingestellte Verhältnis zur Größe des übergeordneten Elements. vw und vh werden durch die Größe des Fensters bestimmt.
(2) Der Vorteil von vw und vh besteht darin, dass sie die Höhe direkt ermitteln können. Mit % kann die Höhe des visuellen Bereichs jedoch nicht korrekt ermittelt werden, ohne die Körpergröße festzulegen gut. Vorteile.

3. Verwendung von vmin und vmax

Wenn Sie bei der Entwicklung mobiler Seiten vw und wh verwenden, um die Schriftgröße festzulegen (z. B. 5vw), wird die Schriftgröße im Hoch- und Querformat angezeigt ist nicht dasselbe.

Da vmin und vmax die aktuellen kleineren vw und vh und die aktuellen größeren vw und vh sind. Hier können Sie vmin und vmax verwenden. Sorgen Sie dafür, dass die Textgröße sowohl auf horizontalen als auch auf vertikalen Bildschirmen konsistent ist.

4, Browserkompatibilität

(1) Desktop-PC

Chrome: Perfekt unterstützt seit Version 26 (Februar 2013)
Firefox: Seit Perfekt unterstützt seit Version 19 ( Januar 2013)
Safari: Perfekt unterstützt seit Version 6.1 (Oktober 2013)
Opera: Perfekt unterstützt seit Version 15 (Juli 2013)
IE: Seit IE10 (einschließlich Edge) wird es immer noch nur teilweise unterstützt (vmax wird nicht unterstützt und vm ersetzt vmin)

(2) Mobilgeräte

Android: seit Version 4.4 Perfekte Unterstützung (Dezember 2013)
iOS: Perfekte Unterstützung seit iOS8-Version (September 2014 )

2. Ein einfaches Beispiel

1, Seitencode

Neben der Einstellung der Breite und Höhe von Elementen kann die Viewport-Einheit auch im Text verwendet werden. Als nächstes legen Sie mit vw die Schriftgröße fest, um responsiven Text zu implementieren.

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

Nach dem Login kopieren

3. Maskierungsebene, um eine vollständige Abdeckung zu erreichen

Manchmal, um das Popup-Feld hervorzuheben oder zu verhindern, dass Seitenelemente angeklickt werden. Wir benötigen eine halbtransparente Maske, die den gesamten sichtbaren Bereich abdeckt, was mit vw und vh leicht zu erreichen ist.

1, Beispielcode

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

Nach dem Login kopieren

4. Implementierung einer zentrierten Popup-Box

1, die Größe der Popup-Box passt sich dem Inhalt an

(1) Beispiel-Rendering

Nachdem Sie auf die Popup-Schaltfläche geklickt haben, wird ein Popup-Feld zentriert auf dem gesamten Bildschirm angezeigt.

Die Größe des Popup-Felds passt sich der Größe des Inhalts (Logobild) an und hinter dem Popup-Feld befindet sich eine durchscheinende Maskenschicht, die den gesamten Bildschirm abdeckt.

Nachdem Sie auf die Schaltfläche „Schließen“ geklickt haben, wird das Popup-Fenster ausgeblendet.

(2) Beispielcode

Die Maskenebene verwendet vw und vh, um eine Vollbildabdeckung zu erreichen. Das Popover wird zur Maskenebene hinzugefügt und zentriert.

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

Nach dem Login kopieren

2. Die Größe des Popup-Felds ändert sich mit der Größe des Fensters

(1) Beispielrendering

Nach dem Klicken auf die Popup-Schaltfläche , wird ein Popup-Feld zentriert auf dem gesamten Bildschirm angezeigt. Das angezeigte Popup-Feld.

Die Größe der Popup-Box wird nicht mehr durch die Größe des Inhalts bestimmt, sondern ändert sich mit der Größe des Fensters (sowohl Breite als auch Höhe betragen 80 % des sichtbaren Bereichs des Bildschirms). ).

Nachdem Sie auf die Schaltfläche „Schließen“ geklickt haben, wird das Popup-Fenster ausgeblendet.

(2) Beispielcode

Die Maskenebene verwendet vw und vh, um eine Vollbildabdeckung zu erreichen. Größe und Position der Popup-Box werden ebenfalls mit vw und vh eingestellt.

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

Nach dem Login kopieren

5. Begrenzen Sie die maximale Größe bei der Anzeige großer Bilder

Wir können auch die maximale Breite oder Höhe einiger Elemente über die Ansichtseinheit begrenzen, um zu vermeiden, dass sie zu groß sind und den Bildschirm überschreiten .

(1) Klicken Sie auf die Schaltfläche, um eine große Version des Originalbilds in der Mitte des Bildschirms anzuzeigen.
(2) Wenn die ursprüngliche Breite und Höhe des Bildes 90 % der Bildschirmbreite und -höhe nicht überschreitet, wird die Standardgröße des Bildes angezeigt.
(3) Wenn die ursprüngliche Breite und Höhe des Bildes 90 % der Bildschirmbreite und -höhe überschreitet, wird es auf 90 % des Bildschirms begrenzt, damit es vollständig angezeigt werden kann.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So erstellen Sie einen Kreisanimationseffekt in HTML5

So verwenden Sie H5s WebGL in demselben Die Schnittstelle erstellt JSON- und Echarts-Diagramme

So verwenden Sie die neuen semantischen Tag-Funktionen von H5

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die neuen CSS3-Einheiten vw, vh, vmin und vmax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!