Über die Verwendung der CSS3-Einheiten vw und vh-CSS-Tutorial-php.cn

In diesem Artikel wird hauptsächlich das Tutorial zur Verwendung der neuen CSS3-Einheiten vw und vh vorgestellt. Dieser Artikel verwendet Beispielcode, um Ihnen die Bedeutung von vw, vh, vmin, vmax und den Unterschied zwischen vw, vh und %-Prozent vorzustellen Wenn Sie Interesse haben, können Sie sich uns anschließen.

Bei reaktionsfähigen Layouteinheiten denken wir zunächst über die Verwendung von REM-Einheiten nach, um die Anpassung zu implementieren. Es muss jedoch auch ein Skript zur dynamischen Berechnung und Elementgröße eingebettet werden.

Zum Beispiel:

(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)

Nach dem Login kopieren

Gibt es eine Einheit, die keine Kopplung von JS und CSS erfordert? Die Antwort ist ja, es ist vw/vh.

vw = view width
vh = view height

Nach dem Login kopieren

Diese beiden Einheiten wurden in CSS3 eingeführt. Die oben genannten Ansichtsfenstereinheiten ermöglichen es uns, die Größe näher am Browserfenster zu definieren.

Die Bedeutung von vw, vh, vmin, vmax

(1) vw, vh, vmin, vmax ist eine Fenstereinheit und eine relative Einheit. 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: Prozentsatz der Fensterbreite (1vw steht für 1 % der Fensterbreite)
vh: Prozentsatz der Fensterhöhe
vmin: der kleinere Wert von aktuellem vw und vh
vmax: der aktuelle vw und vh Der größere Wert in vh

Der Unterschied zwischen vw, vh und %-Prozentsatz

(1) % ist die Größe relativ zum übergeordneten Element Die eingestellten Verhältnisse vw und vh werden durch die Fenstergröße bestimmt.

(2) Der Vorteil von vw und vh besteht darin, dass sie die Höhe direkt ermitteln können. Allerdings kann die Verwendung von % die Höhe des sichtbaren Bereichs nicht korrekt ermitteln, ohne die Körperhöhe festzulegen, daher ist dies ein guter Vorteil.

Verwendung von vmin und vmax

Wenn Sie bei der Entwicklung mobiler Seiten vw und wh verwenden, um die Schriftgröße festzulegen (z. B. 5vw). ), im vertikalen Bildschirm. Die im Querformat angezeigte Schriftgröße ist unterschiedlich.

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.

Browserkompatibilität

(1) Desktop-PC

Chrome: seit Version 26 Perfekt unterstützt seit Version 19 (Januar 2013)
Firefox: 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 (inkl. Edge) 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 seit (Dezember 2013)

iOS: Perfekte Unterstützung seit iOS8-Version (September 2014)

So verwenden Sie die Ansichtsfenster-Einheitsanpassungsseite

Vw nur als CSS-Einheit verwenden

1. Konvertieren Sie entsprechend der Größe des Designentwurfs in die VW-Einheit (SASS-Funktionskompilierung)

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

Nach dem Login kopieren

2. Verwenden Sie vw

< 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);
            }
        }
    }
}

Nach dem Login kopieren

für Text- und Layouthöhe, -breite, -abstand usw. Die beste Vorgehensweise besteht darin, vw und rem abzugleichen

Die Verwendung von vm als CSS-Einheit reduziert die Codemenge erheblich. Sie werden jedoch feststellen, dass es mithilfe der Ansichtsfenstereinheit implementiert wird, sich automatisch abhängig von der Größe des Ansichtsfensters skaliert und die Einschränkungen für die maximale und minimale Breite verloren gehen.

Also dachte ich, es wäre besser, die Rem-Einheit zu kombinieren, um das Layout zu realisieren? Der Kern des flexiblen rem-Layouts besteht darin, die Größe des Stammelements dynamisch zu ändern. Dann können wir Folgendes verwenden: ·

, um die VW-Einheit auf die Größe des Stammelements festzulegen, die sich ändert, wenn sich das Ansichtsfenster ändert seine Größe kann dynamisch geändert werden.

Begrenzen Sie den maximalen und minimalen Wert der Schriftgröße des Stammelements und verwenden Sie den Text plus die maximale Breite und die minimale Breite

, damit wir die maximalen und minimalen Einschränkungen für das erreichen können Layoutbreite. Basierend auf den oben genannten Bedingungen können wir daher den Schluss ziehen, dass die Code-Implementierung wie folgt ist:

// 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;
}

Nach dem Login kopieren

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