MozPacaのメモ帳

WEB関係の記事を書いています。紙のノートにメモするのが面倒くさくなったのでWEBのノートにメモするついでに公開することにしました。

Bootstrap3のレスポンシブ機能を無効化する

Bootstap3にはレスポンシブデザイン、

ウィンドウの幅に合わせて表示方法を変更する処理が含まれています。

 

スマートフォンなどに向けたデザインをする際には、

非常に優れたフレームワークだと思います。

 

しかしレスポンシブにする必要のない場合に

邪魔になる可能性もあります。

 

そこで今回はBootstrapのグリッドシステムなどは

使いつつレスポンシブの機能だけ変更したいと思います。

 

参考

今回の記事はこちらを参考にしました。

getbootstrap.com

 

レスポンシブを無効化するためのcssも用意されているようです。

自分で書きたいんだって訳ではない人は使ってみるのもありだと思います。

http://bootstrap.s1.adexd.net/non-responsive.css

 

使用する場合はhead内などにこの1行を追加するだけです。

 

概要としてはこんな感じ

・meta要素のviewportを削除する。

・レスポンシブを無効にするcssを読み込む。

・グリッドシステムを仕様する場合は"col-xs- "を使用する。

 

今回は最低限の機能を自分で実装したいと思います。

パスなどは自分の環境に合わせて変更してください。

HTML

 

css

 

これでグリッドシステムなどを使用したまま、

レスポンシブの機能を無効化することができます。

f:id:MozPaca:20170514033122j:plain