複数の要素のメディアクエリ

Question

メディアクエリーの新機能。しかし、私はどこかでボートを逃したと思う。

下のスニペットのようなtopBarがあり、topBarコンテナ、固定幅、およびリストで構成され、ユニット全体が右側に浮いているとします。サイズが変更されたときにtopBarが画面とともに縮むまで、画面がサイズ変更されるまで、1000pxと言うまで、私はそれを望みます。 1000pxに達すると何かが起こりますが、後でそれについて心配することができます。

これを行うには、topBarコンテナとtopBar固定幅の両方、またはコンテナだけのクエリを設定する必要がありますか？また、それは私は全体の画面のために目標を設定する必要があります最大幅または最小幅ですか？

#top-menu 
 
{ 
 
    width: 100%; 
 
    background-color: white; 
 
    height: 40px; 
 
    color: #00a5b5 
 
} 
 

 
#topMenu-fixedWidth 
 
{ 
 
    height: 80px; 
 
    width: 1156px; 
 
    color: #00a5b5; 
 
    margin: 0 auto; 
 
} 
 

 
#topMenu-fixedWidth ul 
 
{ 
 
    list-style: none; 
 
    float: right; 
 
    margin-right: 5px; 
 
} 
 

 
#topMenu-fixedWidth ul:nth-child(4) 
 
{ 
 
    margin-right: 0; 
 
} 
 

 
#topMenu-fixedWidth ul li 
 
{ 
 
    float: left; 
 
    margin: 10px;

 <div id="top-menu"> 
 
      <div id="topMenu-fixedWidth"> 
 
       <ul> 
 
        <li class="topMenuText">Partners</li> 
 
        <li class="topMenuText">Careers</li> 
 
        <li class="topMenuText">Language</li> 
 
        <li class="topMenuText">Login</li> 
 
       </ul> 
 
      </div> 
 
     </div>

Answer 1

を使用すると、リサイズ画面と一緒に再サイズにコンテンツたいので、あなたは、このようなvhとしてviewport percentage長さを、使用する必要がありますし、 vw。要素はビューポートに相対的なサイズになります。

また、画面全体を対象とする最大幅または最小幅ですか？

いずれかです。あなたが特定の必要性を持っていない限り、本当に重要ではありません。

@media (min-width: 1000px) { 
    /* executes code here when the screen is 1000px or more */ 
} 

@media (max-width: 1000px) { 
    /* executes code here when the screen is 1000px or less */ 
} 

詳細情報：

• Max-Width vs. Min-Width
• Common breakpoints for media queries on a responsive site

Answer 2

あなたは、すべての画面サイズに適用されるお使いのベースCSSを持っています。それを超えて、画面サイズが変わったときに変更したいCSSクラスを設定します。あなたが1000px以下のフロートを削除したい場合たとえば、あなたは、次の操作を行います：

#topbar {float: right;} 
@media screen and (max-width: 1000px) { 
    #topbar {float: none;} 
} 

Answer 3

それはどんなサイズを変更しませんので、あなたの＃1トップメニューはすでに100％の幅を有しています。

@media screen and (min-width 1000px){ 
    #topMenu-fixedWidth 
    { 
     height: 80px; 
     width: 1156px; 
    } 
} 

*注：あなたの＃トップメニュー-固定幅はそれほどのようなメディアクエリの内側にする必要がありますあなただけがメディアクエリ内で変更したいスタイルを含める必要があります。