Explication détaillée de l'utilisation de nouvelles unités en CSS3-tutoriel CSS-php.cn

Cette fois, je vous apporte une explication détaillée de l'utilisation de nouvelles unités en CSS3. Quelles sont les précautions lors de l'utilisation de nouvelles unités en CSS3. Voici des cas réels, jetons un coup d'œil.

Cet article présente l'explication détaillée de l'utilisation des nouvelles unités CSS3 vw, vh, vmin, vmax, et la partage avec tout le monde. Les détails sont les suivants :

1, la signification de vw, vh, vmin, vmax

(1) vw, vh, vmin, vmax sont des unités de fenêtre et des unités relatives. Ce n'est pas relatif au nœud parent ou au nœud racine de la page. Elle est déterminée par la taille de la fenêtre d'affichage. L'unité est 1, ce qui signifie quelque chose comme 1 %.
La fenêtre d'affichage est la zone dans laquelle votre navigateur affiche réellement le contenu, en d'autres termes, votre navigateur Web sans barres d'outils ni boutons.

(2) La description spécifique est la suivante :

vw : le pourcentage de la largeur de la fenêtre (1vw représente 1% de la largeur de la fenêtre)
vh : le pourcentage de la fenêtre hauteur
vmin : courant La plus petite valeur de vw et vh
vmax : La plus grande valeur de vw et vh actuels

2, la différence entre vw, vh et % pourcentage

(1) % est le rapport fixé par rapport à la taille de l'élément parent, vw et vh sont déterminés par la taille de la fenêtre.
(2) L'avantage de vw et vh est qu'ils peuvent obtenir directement la hauteur. Cependant, l'utilisation de % ne peut pas obtenir correctement la hauteur de la zone visuelle sans régler la hauteur du corps, c'est donc tout à fait vrai. bons.

3. Utilisations de vmin et vmax

Lors du développement de pages mobiles, si vous utilisez vw et wh pour définir la taille de la police (comme 5vw), dans le portrait et états paysage. Les tailles de police indiquées ci-dessous sont différentes.

Puisque vmin et vmax sont les plus petits vw et vh actuels et les plus grands vw et vh actuels. Ici, vous pouvez utiliser vmin et vmax. Rendre la taille du texte cohérente dans les écrans horizontaux et verticaux.

4, compatibilité navigateur

(1) PC de bureau

Chrome : parfaitement supporté depuis la version 26 (février 2013)
Firefox : Parfaitement supporté depuis la version 19 (janvier 2013)
Safari : Parfaitement supporté depuis la version 6.1 (octobre 2013)
Opera : Parfaitement supporté depuis la version 15 (2013) juillet 2018)
IE : Depuis IE10 (y compris Edge) n'est encore que partiellement supporté (vmax n'est pas supporté, et vm remplace vmin)

(2) Appareils mobiles

Android : Parfaitement supporté depuis la version 4.4 (décembre 2013)
iOS : Parfaitement supporté pris en charge depuis la version iOS8 (septembre 2014)

2. Un exemple simple Par exemple,

1, code de page

L'unité de fenêtre peut non seulement être utilisée pour définir la largeur et la hauteur des éléments, mais peut également être utilisée dans le texte. Ensuite, utilisez vw pour définir la taille de la police afin d'implémenter le texte réactif.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <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>
  </head>
  <body>
      <p class="demo">
          <h1>宽度100％, 字体5％</h1>
      </p>
      <p class="demo2">
          <h2>宽度80％, 字体5％</h2>
      </p>
      <p class="demo3">
          <h3>宽度50％, 高度50％, 字体1％</h3>
      </p>
  </body>
</html>

Copier après la connexion

2, rendus

3. Couche de masque pour obtenir une couverture complète

Parfois pour mettre en surbrillance la boîte contextuelle ou pour empêcher les éléments de la page d'être cliqués. Nous avons besoin d'un masque semi-transparent qui couvre toute la zone visible, ce qui peut être facilement réalisé en utilisant vw et vh.

1, exemple de code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <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>
  </head>
  <body>
      <button onclick="document.getElementById(&#39;mask&#39;).style.display=&#39;inline&#39;">点击显示遮罩</button>
      <p id="mask" onclick="document.getElementById(&#39;mask&#39;).style.display=&#39;none&#39;"/></p>
  </body>
</html>

Copier après la connexion

2, rendu

4. Implémenter un Boîte pop-up centrée

1. La taille de la boîte pop-up s'adapte au contenu

(1) Exemple de rendu

Après avoir cliqué le bouton pop-up, affiche une popup centrée sur tout l'écran.

La taille de la boîte pop-up est adaptative en fonction de la taille du contenu (image du logo), et il y a un calque de masque translucide derrière la boîte pop-up qui couvre tout l'écran.

Après avoir cliqué sur le bouton de fermeture, la boîte contextuelle sera masquée.

(2) Exemple de code

Le calque de masque utilise vw et vh pour obtenir une couverture plein écran. Le popover est ajouté au calque de masque et centré.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script type="text/javascript" src="js/jquery.js"></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: '';
        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>
      <p id="dialogContainer" class="dialog-container">
          <p class="dialog-box">
              <p class="dialog-title">居中弹出框</p>
              <a onclick="$(&#39;#dialogContainer&#39;).hide();" class="dialog-close">关闭</a>
              <p class="dialog-body">
                <img src="logo.png" class="demo-image" />
              </p>
          </p>
      </p>
  </body>
</html>

Copier après la connexion

2. La taille de la boîte pop-up change avec la taille de la fenêtre

（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, 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>
  </head>
  <body>
      <button onclick="$(&#39;#dialogContainer&#39;).show();">点击显示弹出框</button>
      <p id="dialogContainer" class="dialog-container">
          <p class="dialog-box">
              <p class="dialog-title">居中弹出框</p>
              <a onclick="$(&#39;#dialogContainer&#39;).hide();" class="dialog-close">关闭</a>
              <p class="dialog-body">
                <img src="logo.png" class="demo-image" />
              </p>
          </p>
      </p>
  </body>
</html>

Copier après la connexion

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

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

1，效果图

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

2，样例代码

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script type="text/javascript" src="js/jquery.js"></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: '';
        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>
  </head>
  <body>
      <button onclick="$(&#39;#dialogContainer&#39;).show();">点击显示大图</button>
      <p id="dialogContainer" class="dialog-container" onclick="$(&#39;#dialogContainer&#39;).hide();">
          <p class="dialog-box">
              <img src="image.jpg" class="demo-image" />
          </p>
      </p>
  </body>
</html>

Copier après la connexion

六、实现 Word 文档页面效果

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

2，样例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script type="text/javascript" src="js/jquery.js"></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 type="text/javascript">
      $(document).ready(function(){
        var lenPage = $("page").length;
        //自动添加每页底部的页码
        $("page").each(function(i){
          $(this).attr("data-page", "第 "+ (i+1) +" 页，共 "+ lenPage +" 页");
        });
      });
    </script>
  </head>
  <body>
    <page><a href="http://hangge.com">欢迎访问 hangge.com</a></page>
    <page></page>
    <page></page>
  </body>
</html>

Copier après la connexion

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