Entsprechende Einführung von „vh' und „vw' in mobilen CSS-Einheiten-CSS-Tutorial-php.cn

Entsprechende Einführung von „vh' und „vw' in mobilen CSS-Einheiten

高洛峰

Freigeben： 2017-03-17 09:47:32

Original

2810 Leute haben es durchsucht

1. Vorwort:

Responsive Webdesign ist untrennbar mit Prozenten verbunden. Allerdings sind CSS-Prozentsätze nicht für alle Probleme die beste Lösung. Die CSS-Breite ist relativ zur Breite des nächstgelegenen übergeordneten Elements, das sie enthält. Was aber, wenn Sie anstelle des übergeordneten Elements nur die Breite oder Höhe des Ansichtsfensters verwenden möchten?

2. „vh“ & „vw“:

vh: Höhe relativ zum Fenster: Die Höhe des Fensters beträgt 100vh.

vw: relativ zur Breite des Fensters: Die Fensterbreite beträgt 100vw.

Entsprechende Einführung von „vh und „vw in mobilen CSS-Einheiten

100 % Höhe des Fensters
(Schau mich an!!!)

Schau mich an! ! ! Schau mich an...! ! ! Ich bin die Breite des Browserfensters (Sie können meine Änderungen sehen, indem Sie die Browserbreite ändern): 0

3. Quellcode:

CSS:

  .demo-1,.demo-2,.demo-3{margin-bottom:10px; padding:10px 0; line-height: 30px; color: #fff; text-indent: 10px;}
  .demo-1 strong,.demo-2 strong,.demo-3 strong{color:#fff !important;}
  .demo-1{width:10vw; background: #1ab5e3;}
  .demo-2{width:25vw; background: #FF5F09;}
  .demo-3{width:50vw; background: #28AF59;}
  .demo-4{position: fixed; z-index: 10; top: 0; left: 0; width: 150px; height: 100vh; color: #fff; background: rgba(0,0,0,.5);}
  .demo-4 span{position:absolute; top:50%; display:block; padding: 0 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}

Nach dem Login kopieren

HTML :

  <p>视窗的10%: <strong>0</strong></p>
  <p>视窗的25%: <strong>0</strong></p>
  <p>视窗的50%: <strong>0</strong></p>
  <p><span>视窗的100%高度<br>（看我！！！）</span></p>
  <p>看我！！！看我...！！！我是浏览器视窗的宽度（你可以通过改变浏览器宽度看我的变化）：<span>0</span></p>

Nach dem Login kopieren

JS:

$(function(){
  //视窗宽度改变函数
  function resizeWindow(){
    var viewWidth = window.innerWidth;
    $('.js-viewWidth').html(viewWidth);
    $('.js-getVW3').html(viewWidth/2);
    $('.js-getVW2').html(viewWidth/4);
    $('.js-getVW1').html(viewWidth/10);
  }
  //初始化
  resizeWindow();
  
  //浏览器视窗改变时调用上面定义的函数
  $(window).resize(function(event) {
    resizeWindow();
  });
});

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEntsprechende Einführung von „vh' und „vw' in mobilen CSS-Einheiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!