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

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

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

CSSの記述例

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

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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タグを出力する箇所です。

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

ブラウザリサイズ時のJavaScritp記述

※ブラウザ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>

 

ブラウザ幅(ピクセル)サイズによってタグ要素を変えるデモ

※流用される場合は自己責任でお願いします。
 タグ内のGoogleアナリティクスタグは流用しないで下さい。