幅、高さ、テキストの比率に準拠したフルスクリーンのスケーラブルなdiv

こんにちは 先日、私は存在しなくなったサイトで「スタブ」を書く仕事をしました。 設計ソリューションは、オフィスの紙利用者がスムーズに吸収する古いサイトをシートに印刷したビデオを作成することです。 ビデオが終了すると、「古いサイトはもうありません。 間もなく新しいものが登場します。」、会社のロゴ、FacebookとGoogle+へのリンク、および連絡先情報。







Css経由のビデオは、比率を維持しながら、ユーザーの画面に応じてビューポートの幅または高さ全体に配置されます。 つまり、解像度が1280 x 1024のビデオがある場合、ブラウザウィンドウのサイズを変更すると、その解像度は比例して変化します：1000 x 800、600 x 480。



したがって、主なキャッチは、ビデオの上に同じプロパティとサイズのブロックを作成する必要があり、ブロック内のすべてのコンテンツは、コンテンツ自体ではなくブロック自体のサイズを変更するのではなく、写真またはそのスクリーンショットと同じようにスケーリングする必要があるということです。







しばらく座って考えた後、1つのCsではこれができないことに気づいたので、このタスクを実装する小さなスクリプトをスケッチしました。



例はここにあります 。 最近のすべてのブラウザーで動作します。

HTMLコード

<div></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSSスタイル

 body { overflow: hidden; } div { position: absolute; font-family: Arial; color: #fff; background: #5aa348; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Javascript

 var docWidth, docHeight, docRatio, div = document.getElementsByTagName('div')[0]; onresize = function() { docWidth = document.body.clientWidth; docHeight = document.body.clientHeight; //     docRatio = docWidth / docHeight; //    fullScreenProportionalElem(div, 1920, 1080); // , ,  resizeFont(div, 1920, 1080, 200); // , , ,   //         } function fullScreenProportionalElem(elem, width, height) { var ratio = width / height; //    if (docRatio < ratio) { elem.style.width = docWidth + 'px'; elem.style.height = Math.round(docWidth / ratio) + 'px'; elem.style.top = Math.round(docHeight / 2 - elem.offsetHeight / 2) + 'px'; elem.style.left = '0px'; //       //      ,  ,     } else if (docRatio > ratio) { elem.style.width = Math.round(docHeight * ratio) + 'px'; elem.style.height = docHeight + 'px'; elem.style.top = '0px'; elem.style.left = Math.round(docWidth / 2 - elem.offsetWidth / 2) + 'px'; //       //      ,  ,     } else { elem.style.width = docWidth + 'px'; elem.style.height = docHeight + 'px'; elem.style.top = '0px'; elem.style.left = '0px'; //        //      ,   top  left } } function resizeFont(elem, width, height, size) { var ratio = width / height; //    if (docRatio < ratio) elem.style.fontSize = height * size / 14062 + 'vw'; else if (docRatio > ratio) elem.style.fontSize = width * size / 14062 + 'vh'; //  14062      ,     } onresize(); //  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

値「vw」および「vh」により、ビューポートの幅と高さにスナップできます。

Cssで上記の関数と条件値を使用して、任意のモニターのWebサイトを作成できます。