2017-12-27 20 views
0

私は、ブートストラップ要素を使ってインタラクティブタグクラウドを作ろうとしています。それは大丈夫ですが、私は周りの上部と左から絶対的な位置を使用して異なるタグを配置したdiv。下に貼り付けられていますが、これはかなりコードなので、this fiddleもコードで作成しました(注:スニペットはデスクトップ画面の全幅で表示されます)。絶対配置された要素を反応的にするにはどうすればいいですか?

しかし、絶対配置を使用しているため、ブートストラップ列が提供する応答性が失われます。代わりに、複数の単語のタグが複数の行に壊れてしまい、タグが重複してしまうなど、望ましくない動作が発生します。

タグクラウドも同様に反応的にしたいと思っていますが、どうやってそれを行うのかは分かりません。これは、メディアのクエリでこれを行うには、私はかなり頻繁に幅をサンプリングする必要があると思われる。別のアイデアは、ウィンドウの幅に基づいて位置(および多分フォントサイズ)を調整するためにJQueryを使用することでしたが、それは問題を解決しません。

私の最終的な目標は、画面サイズが変更されているときに内部div(つまりタグ)の同じ相対位置を維持することです。ある時点では、列はスタックすることができますが、列のスタックまでは、タグ間の空きスペースを減らしたり、タグのフォントサイズを小さくしても、同じタグレイアウトを維持したいと考えています。どちらの場合も、画面サイズの変更に比例して変更を加えたいと思います。

内部divタグのレイアウトを維持しながら、このタグクラウドを画面サイズの変更に対応させるにはどうすればよいですか?

.tmp{ 
 
\t background-color: #000; 
 
\t height: 600px; 
 
} 
 

 
.tagcloud{ 
 
\t font: "Arial Bold"; 
 
\t font-weight: bolder; 
 
\t height: 600px; 
 
\t background-color: #202020; 
 
\t position: relative; 
 
\t text-align: center; 
 
\t min-width: 700px; 
 
} 
 

 
.tagcloud div{ 
 
\t position: absolute; 
 
} 
 

 
.tagcloud a{ 
 
\t text-decoration: none; 
 
\t color: inherit; 
 
} 
 

 
.tagcloud a:hover{ 
 
\t text-decoration: underline; 
 
} 
 

 
.tagcloud .l1{ 
 
\t font-size: 80px; 
 
\t cursor: pointer; 
 
} 
 

 
.tagcloud .l2{ 
 
\t font-size: 68px; 
 
\t cursor: pointer; 
 
} 
 

 
.tagcloud .l3{ 
 
\t font-size: 56px; 
 
\t cursor: pointer; 
 
} 
 

 
.tagcloud .l4{ 
 
\t font-size: 44px; 
 
\t cursor: pointer; 
 
} 
 

 
.tagcloud .l5{ 
 
\t font-size: 38px; 
 
\t cursor: pointer; 
 
} 
 

 

 
#item1{ 
 
\t color: #c9d35f; 
 
\t top: 10px; 
 
\t left: 150px; 
 
} 
 

 
#item2{ 
 
\t color: #09c9b9; 
 
\t top: 210px; 
 
\t left: 440px; 
 
} 
 
#item3{ 
 
\t color: #ba612e; 
 
\t top: 410px; 
 
\t left: 310px; 
 
} 
 
#item4{ 
 
\t color: #4b7711; 
 
\t top: 275px; 
 
\t left: 130px; 
 
} 
 
#item5{ 
 
\t color: #1bb1fc; 
 
\t top: 130px; 
 
\t left: 560px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-sm-6 tmp"></div> 
 
    <div class="col-sm-6 col-centered tagcloud"> 
 
     <div class="l1" id="item1"> 
 
     <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text"> 
 
      First Item</a> 
 
     </div> 
 
     <div class="l2" id="item2"> 
 
     <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text"> 
 
      Another Item 
 
     </a> 
 
     </div> 
 
     <div class="l3" id="item3"> 
 
     <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text"> 
 
      Item3 
 
     </a> 
 
     </div> 
 
     <div class="l4" id="item4"> 
 
     <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text"> 
 
      Item4 
 
     </a> 
 
     </div> 
 
     <div class="l5" id="item5"> 
 
     <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text"> 
 
      Item5 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

+0

"応答性"にしたいと言っているだけでは不十分です。さまざまなサイズと形状のビューポート、特にオーバーラップするタグをどのように解決するかについて、タグクラウドがどのように動作するかを記述する必要があります。私は意見に基づいてこの質問を見ませんが、それは明確さが欠けており、それがそのままでは広すぎます。 – Alohci

+0

@Alohci:注釈をいただきありがとうございます。私は、何を達成しようとしているのかを明確にするためにOPを更新しました – marcman

答えて

1

あなたはフォントサイズプロパティを設定するCSS3でVWユニットを使用することができます。これは、タグは、ブラウザの幅に合わせて拡大縮小するようになります:

W3Schools - CSS Units

タグの位置も(彼らは、コンテナ内にある場合)またはVHのいずれかを使用して設定する必要がありますvw単位(タグクラウドがウィンドウ全体を埋める場合)あなたのケースでは、これはあなたのトップ CSSプロパティのパーセンテージ単位を使用する可能性が最も高いでしょう。

これを行うと、テキストのサイズと位置の両方がブラウザのビューポートからの相対的なものになります。

ただし、それはあなたにpartial browser supportを与えるだけです。古いブラウザをサポートする必要がある場合は、代わりにvUnit.jsを使用できます。必要に応じて

:あなたはまた、ビューポート単位のサポートを確認するためにModernizrを使用することによって、フォールバックとCSSを組み合わせることができ

- あなたは、古いもののために、新しいブラウザのCSSを使用し、vUnitことができます。 (たとえば、モバイル幅で)、あなたが縦にタグをスタックする場合がありますので、フォントドン

.tagcloud a { white-space: nowrap; } 

をあなたの列の崩壊後は:新しい行に破壊

マルチワードリンクが使用することによって防止することができる

小さ過ぎる。その場合、メディアクエリを使用してdiv要素から絶対位置を削除したり、必要に応じてフォントサイズを変更することができます。

0

使用応答埋め込み

ブラウザが正しく任意のデバイスのスケールであろう固有の比を作成することによって、それらの包含ブロックの幅に基づいて、ビデオやスライドショーの寸法を決定することを可能にします。

ルールを直接

<iframe>, <embed>, <video>, 

および要素に適用されます。 他の属性のスタイリングと一致させる場合は、オプションで明示的子孫 クラス.embed-responsive-itemを使用します。

Pro-Tip!私たちがあなたのためにオーバーライドするので、frameborder = "0"をあなたの中に含める必要はありません。詳細については

<!-- 16:9 aspect ratio --> 
<div class="embed-responsive embed-responsive-16by9"> 
<iframe class="embed-responsive-item" src="..."></iframe> 
</div> 
<!-- 4:3 aspect ratio --> 
<div class="embed-responsive embed-responsive-4by3"> 
<iframe class="embed-responsive-item" src="..."></iframe> 
</div> 

参照してください。 https://getbootstrap.com/docs/3.3/components/#responsive-embed

+1

質問は埋め込みビデオやスライドショーに関するものではなく、リストされたタグを使用しません。 –

関連する問題