Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Mobile CSS-Einheit „vh' und „vw'

高洛峰
Freigeben: 2016-11-15 15:36:33
Original
2441 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: relativ zur Höhe des Fensters: Die Höhe des Fensters beträgt 100vh.

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

Mobile CSS-Einheit „vh und „vw'

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:

<div class="demo-1">视窗的10%: <strong class="js-getVW1">0</strong></div>
<div class="demo-2">视窗的25%: <strong class="js-getVW2">0</strong></div>
<div class="demo-3">视窗的50%: <strong class="js-getVW3">0</strong></div>
<div class="demo-4"><span>视窗的100%高度<br/>(看我!!!)</span></div>
<p class="btn-normal">看我!!!看我...!!!我是浏览器视窗的宽度(你可以通过改变浏览器宽度看我的变化):<span class="js-viewWidth">0</span></p>
Nach dem Login kopieren

JS :

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

Interessierte Studierende können den Originaltext besuchen: http://www.yuanbo88.com/article.html?rid=44.

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