【CSSフレームワーク】FoundationでレスポンシブWebデザインを無効にする方法

css

レスポンシブWebデザインって最近の流行りだし、使い勝手もよくて個人的には非常に好きなのですが、業務系アプリだとレスポンシブWebはやめてほしいという声をクラインとから意外とよく聞きます。

スマホやタブレットを使わないことを前提とした業務系アプリでは、確かに画面サイズによってUIが変わるとなるとあまりよろしくないようにも思えます。

今回はそんな要望に応えるべく、FoundationのレスポンシブWebデザインを無効にする方法を紹介します。

[スポンサーリンク]

Foundationでレスポンシブwebデザインを無効にする

まずはfoundation.cssを開いて以下を参考に、min-widthの値を小さく変更します。
min-widthの箇所はたくさんあるので、一括置換をして全てを変更するように気をつけましょう。
変更点は以上で終わりです。
変更後、ブラウザの大きさを変えてみて確認して下さい。レスポンシブWebデザインは無効になっています。

変更前

@media only screen and (min-width: 40.063em) {
.
.
.
@media only screen and (min-width: 64.063em) {
.
.
.

変更後

@media only screen and (min-width: 00.063em) {
.
.
.
@media only screen and (min-width: 00.063em) {
.
.
.

さいごに

FoundationのレスポンシブWebデザインをやめるのは意外と簡単だったと思います。

min-widthのサイズを変えることによって、レスポンシブWebデザインが無効化する以外は特に弊害はありませんでした。

最近の業務系アプリでもUIはCSSフレームワークを使うところが増えてきているように思います。(まだまだBoot Strapがメインですが。)
レスポンシブWebデザインを無効にしたいというのは、業務系アプリ特有の要件のようにも思えますが、そんな要件もFoundationはカバーできるので使っていてよかったなぁと改めて考えさせられました。
それでは!