2017-12-30 91 views
0

単純なはずのものがあります。 基本的には、イメージと下のテキストからなる要素を、縦と横の両方に配置したいと考えています。これは、すべてのデバイスで一貫して一種のウェルカムスクリーンとして、おそらくパーセンテージを使用するために必要ですか?内容が重複していないすべてのデバイスの垂直中央ヘッダイメージ

以下、私のコードでは、いくつかのnavタブである次の要素ですが、私のコードの問題は、コンテンツの重複を引き起こし、少しのガイダンスを探しているということです。私はビューポートが変わるので、コード内に固定された高さを置くことはできません。

これに関するお手伝いがありましたら、ありがとうございます。

HTML

<header class="header-content text-center"> 
    <img src="assets/img/sample.png"/> 
    <h1>some text</h1> 
    <h2>here is some more text that I am working on blah</h2> 
    </header> 

    <section class="container"> 
    <ul class="nav nav-tabs nav-justified"> 
     <li data-toggle="tab" class="active"><a href="#home">Test</a></li> 
     <li><a data-toggle="tab" href="#menu1">test1</a></li> 
     <li><a data-toggle="tab" href="#menu2">test2</a></li> 
     <li><a data-toggle="tab" href="#menu3">test3</a></li> 
    </ul> 

    <div class="tab-content"> 
     <div id="home" class="tab-pane fade in active"> 
     <h3>test</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
     <div id="menu1" class="tab-pane fade"> 
     <h3>test1</h3> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     </div> 
     <div id="menu2" class="tab-pane fade"> 
     <h3>test2</h3> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
     </div> 
     <div id="menu3" class="tab-pane fade"> 
     <h3>test3</h3> 
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
     </div> 
    </div> 
    </section> 

CSS

header.header-content{ 
    color:#fff; 
    margin: auto; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%) 
} 

答えて

1

あなたは常にブレークポイントを使用することができます。

screen

は自明である

@media screen and (max-width: 1000px) { 
    /* Fill with styling rules */ 
} 

@media異なるデバイスのための異なるルールを定義するために使用され、画面の幅、等:基本的に、それは次のように動作します。

(max-width: 1000px)は、1000ピクセル以下のものには、それらに適用されるスタイルルールが適用されることを意味します。代わりにmin-widthを使用することもできますが、これは反対です。

+0

ええ、私はそれに近づくためのより良い全体的な方法があり、追加のブレークポイント関連のCSSを実行する必要がないことを願っていました。モビール、Ipadsなどはすべてdiffスクリーンハイトを持っているので、より良いアプローチを望んでいる。 – Nick

+0

いつもパーセントを使うことができますが、通常はフォントサイズに入るときにブレークポイントを使うのが良い方法ですパーセンテージで行う)。私は両方の組み合わせを使うことができると思います。 –

関連する問題