サイトを画面の幅に併せて全体的に縮小する方法を教えて下さい。

Question

サイトをレスポンシブでスマホには対応したのですが、画面の幅が1260px-640pxの間のとき表示が崩れてしまいます。
これには後で対応しようと思うのですが、幅が1260px-640pxのとき【一時的な対処】として表示が崩れないようにする簡単な方法はないでしょうか？
上記の幅であれば全体的に縮小できればと思うのですが、表示が崩れなければ他の方法でも構いません。

該当ページは以下のリンクです。
http://wonect.com/
崩れる場所は、ヘッダーと、メインバナーの下の３枚のバナーです。

以上、お手数ですがご教授いただけますでしょうか。

Comments

[kei344]

URLにはリンクを張ることができますので、編集よろしくお願いします。

Answer 1

CSSのメディアクエリではダメですか？
CSSファイルに以下のように記述してバナー部分の拡縮を指定します。

@media screen and (min-width: 640px) and (max-width: 1260px){
/*ここにスタイル*/
}

Comments

[h-o]

返信いただき誠にありがとうございます。参考にさせていただきます。

Answer 2

スマホレイアウトに切り替わるまでは幅1200px固定でレスポンスしない状態にしておくのが
最も簡単な【一時的対処】かと思われます。
メインバナー下の３枚バナーは各バナーのコンテナを%指定すれば良いだけなのですぐ対処できますが、
この手のグローバルナビはレイアウトそのものを狭い画面幅に合わせて大幅に変更しないと不具合が生じるので、
結構大掛かりになる可能性が出てきます。

どうせ一時的な対処なのであればPC固定＋スマホ可変の「アダプティブレイアウト」で当座をしのいで、
後で全部まとめてちゃんと対処するのがよろしいかと。

Comments

[h-o]

返信いただき誠にありがとうございます。固定で対処します。