モバイルデバイス上のクラスだけを割り当てる方法はありますか

Question

メニューのスタイリングが終わったばかりですが、モバイルデバイスのモバイルスタイルメニューにすべてマージする必要があります。サイトはhereです。ここで

は、メニューのHTMLです：ここで

  <div class="masthead clearfix"> 
 
      <div class="inner"> 
 
       <h3 class="masthead-brand">ONLY AT LSA</h3> 
 
       <nav> 
 
       <ul class="nav masthead-nav"> 
 
        <li class="active"><a href="#">The Experience</a></li> 
 
        <li><a href="#">Recent News</a></li> 
 
        <li><a href="#">Gallery</a></li> 
 
       </ul> 
 
       </nav> 
 
      </div> 
 
      </div>

は、メニューのCSSです：

.masthead-brand { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.masthead-nav > li { 
 
    display: inline-block; 
 
} 
 
.masthead-nav > li + li { 
 
    margin-left: 20px; 
 
} 
 
.masthead-nav > li > a { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    color: #fff; /* IE8 proofing */ 
 
    color: rgba(255,255,255,.75); 
 
    border-bottom: 2px solid transparent; 
 
} 
 
.masthead-nav > li > a:hover, 
 
.masthead-nav > li > a:focus { 
 
    background-color: transparent; 
 
    border-bottom-color: #a9a9a9; 
 
    border-bottom-color: rgba(255,255,255,.25); 
 
} 
 
.masthead-nav > .active > a, 
 
.masthead-nav > .active > a:hover, 
 
.masthead-nav > .active > a:focus { 
 
    color: #fff; 
 
    border-bottom-color: #fff; 
 
}

だから私はそれをしたいです〜へクリックしたアイコンを使ってthisから理想的なモバイルナビゲーションシステムに移動し、メニューを展開します。

Answer 1

あなたは良いブラウザプラットフォームの検出スクリプトを実装する場合、あなたはユーザーデバイスに応じてコンテンツをレンダリングする修正するために `IF-then`条件を作成することができCSS

/* All Mobile Sizes */ 
@media only screen and (max-width: 767px) { ... }