ブラウザ幅（ピクセルサイズ）によってタグ要素を変える方法【レスポンシブに使える】 DAD UNION

ブラウザの幅（ピクセルサイズ）を判定し、タグ要素を変更する方法をご紹介します。
cssのメディアクエリを使用する方法では無く、JavaScriptの「.resize()」と「$(window).width()」を使用します。
レスポンシブサイトで要素を切り替える時に使えます。

Contents

ブラウザ幅（ピクセルサイズ）によってタグ要素を変えるCSSの記述
ブラウザ幅（ピクセルサイズ）によってタグ要素を変えるHTMLの記述
ブラウザ幅（ピクセルサイズ）によってタグ要素を変えるブラウザリサイズ時のJavaScritp記述
ブラウザ幅（ピクセル）サイズによってタグ要素を変えるデモページ

ブラウザ幅（ピクセルサイズ）によってタグ要素を変えるCSSの記述

※ここは重要では無いので、必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
}
h1{
  font-size:16px;
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0 30px 0;
}

.txt{
  font-size: 18px;
  text-align: center;
  color: blue;
}
.red{
  color: red;
  font-weight: bold;
  font-size: 30px;
}
</style>

ブラウザ幅（ピクセルサイズ）によってタグ要素を変えるHTMLの記述

※ブラウザ幅によって2パターンのhtmlタグ要素出力先（class=”txt”）を用意します。

<h1>ブラウザ幅を縮めてみてください。<br>800px以下になると以下のテキストが変わります。</h1>

<div class="txt"></div>

ブラウザ幅（ピクセルサイズ）によってタグ要素を変えるブラウザリサイズ時のJavaScritp記述

※jquery-2.2.0.min.jsファイルを読み込みます。ブラウザwidth（幅）を取得し、ブラウザ幅が801px以上の時と800px以下の時で2パターンhtmlタグを出力する処理です。必要に応じて書き換えてください。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function sp() {
  wd = $(window).width();
  if(wd <= 800){
    $(".txt").html("<span class='red'>ブラウザが幅800px以下になりました！</span>");
  }else{
    $(".txt").html("現在ブラウザ幅が801px以上");
  }
}

$(function(){
  sp();
});

$(window).resize(function(){
  sp();
});
</script>