ウェブページの特定のセクションをモバイルビューに表示する方法

Question

私はウェブサイトを作成するためにブートストラップを使用しています。モバイルビューで別の場所で使用するには単一のセクションが必要ですが、重複したコードは必要ありません。

@mediaのみ画面と（最大幅：1100px）

Answer 1

あなたは、コードの下のcss style.likeを使用してdiferente幅を持つ別のplase内のページの表示を設定することができます{あなたのスタイル...}

@mediaのみ画面と（最大幅：843px）{あなたのスタイル...}

Answer 2

(function($) { 
 
    var $window = $(window), 
 
     $html = $('html'); 
 

 
    $window.resize(function resize() { 
 
     if ($window.width() < 514) { 
 
      return $html.addClass('mobile'); 
 
     } 
 

 
     $html.removeClass('mobile'); 
 
    }).trigger('resize'); 
 
})(jQuery);

html { 
 
    background: white; 
 
    color: red; 
 
    font-size: 1.4em; 
 
} 
 
html.mobile { 
 
    background: blue; 
 
    color: white; 
 
    font-size: 1em; 
 
} 
 

 
Like that you can add section according to screen size.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>I am text.</>