À propos de l'utilisation des unités CSS3 vw et vh

Cet article présente principalement le tutoriel d'utilisation des nouvelles unités CSS3 vw et vh. Cet article présente la signification de vw, vh, vmin, vmax et la différence entre vw, vh et % pourcentage à travers un exemple de code. rejoignez-nous. Jetons un coup d'oeil

Pour les unités de mise en page réactives, nous penserons d'abord à utiliser les unités rem pour implémenter l'adaptation, mais il faut également intégrer un script pour calculer dynamiquement la taille des éléments.

Par exemple :

(function (doc, win) {
  let docEl = doc.documentElement
  let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  let recalc = function () {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = 14 * (clientWidth / 320) + 'px'
  }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

Existe-t-il une unité qui ne nécessite pas de couplage de JS et CSS ? La réponse est oui, c'est VW/VH.

vw = view width
vh = view height

Ces deux unités ont été introduites par CSS3. Les unités de fenêtre d'affichage ci-dessus nous permettent de définir la taille la plus proche de la fenêtre du navigateur.

La signification de vw, vh, vmin, vmax

(1) vw, vh, vmin, vmax est une unité de fenêtre et une unité relative. 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 : pourcentage de la largeur de la fenêtre (1vw représente 1% de la largeur de la fenêtre)

• vh : pourcentage de la hauteur de la fenêtre

• vmin : le plus petit des vw et vh actuels

• vmax : le vw et vh actuels La plus grande valeur en vh

La différence entre vw, vh et % pourcentage

(1) % est la taille par rapport à l'élément parent. Les ratios définis, 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 visible sans régler la hauteur du corps, c'est donc un bon avantage.

Utilisation 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 (par exemple 5vw ), sur l'écran vertical. La taille de la police affichée en mode paysage est différente.

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.

Compatibilité navigateurs

(1) PC de bureau

• Chrome : depuis la version 26 Parfaitement supporté depuis la version 19 (janvier 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 (juillet 2013)

IE : Depuis IE10 (y compris Edge) il est toujours uniquement partiellement supporté (vmax n'est pas supporté, et vm remplace vmin)

(2) Appareils mobiles

Android : depuis la version 4.4 Support parfait depuis (décembre 2013)

iOS : Support parfait depuis la version iOS8 (septembre 2014)

Comment utiliser la page d'adaptation de l'unité de fenêtre

Utiliser uniquement vw comme unité CSS

1. Convertir en unité vw en fonction de la taille du brouillon de conception (compilation de fonctions SASS)

//iPhone 6尺寸作为设计稿基准
$vm_base: 375;
@function vm($px) {
    @return ($px / 375) * 100vw;
}

2. Utilisez vw pour le texte, la hauteur de mise en page, la largeur, l'espacement, etc.>

< p class="mod_nav">
            < nav class="mod_nav_list" v-for="n in 5">
                < a href="#" class="mod_nav_list_item">
                    < span class="mod_nav_list_item_logo">
                < img src="http://jdc.jd.com/img/80">
                    < /span>
                    < p class="mod_nav_list_item_name">导航入口< /p>
                < /a>
            < /nav>
< /p>
.mod_nav {
    background: #fff;
    &_list {
        display: flex;
        padding: vm(15) vm(10) vm(10);
        &_item {
            flex: 1;
            text-align: center;
            font-size: vm(10);
            &_logo {
                display: block;
                margin: 0 auto;
                width: vm(40);
                height: vm(40);
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vm(2);
            }
        }
    }
}

L'utilisation de vm comme unité CSS réduit considérablement la quantité de code, mais vous constaterez qu'elle est implémentée à l'aide de l'unité de fenêtre d'affichage, mise à l'échelle automatiquement en fonction de la taille de la fenêtre d'affichage et perdant le maximum et restrictions de largeur minimale.

Alors, j'ai pensé qu'il serait préférable de combiner l'unité rem pour réaliser l'aménagement ? Le cœur de la disposition flexible rem est de modifier dynamiquement la taille de l'élément racine. Ensuite, nous pouvons utiliser : · pour définir l'unité vw pour la taille de l'élément racine qui change à mesure que la fenêtre d'affichage change, de sorte que sa taille peut être modifiée dynamiquement.

Limitez la valeur maximale et minimale de la taille de police de l'élément racine et utilisez le corps plus la largeur maximale et la largeur minimale

afin que nous puissions atteindre les restrictions maximales et minimales sur le largeur de mise en page. Par conséquent, sur la base des conditions ci-dessus, nous pouvons conclure que l'implémentation du code est la suivante :

// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
    // 同时，通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于CSS代码如何书写规范

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!