Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

高洛峰
Freigeben: 2017-03-17 09:47:32
Original
2787 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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage