2016-04-28 21 views
0

固定幅レイアウトのウェブサイトがあり、それを簡単に変更することはできません。その幅は約1300ピクセルなので、小さな画面ではうまく表示されません。画面幅に固定幅レイアウトを自動調整

私は小さな画面でもウェブサイトを見栄えにするためのソリューションを探しています。ユーザーがブラウザのズームレベルを75%のようなものに変更すると、すべてが非常によく見えるので、これは理想的です。しかし、私は、ブラウザのズームレベルの変更はJavaScriptでは不可能であり、この機能の動作はブラウザ間で一貫していないことを読んでいます。

この問題を解決する標準的なソリューション(ライブラリなど)はありますか?

+0

あなたはcssでそれを行うことができます:http://www.w3schools.com/cssref/css3_pr_mediaquery.aspあなたが望むサイズのブレークポイントを追加し、CSSを上書きします。 – Petroff

+0

はい、私はこのルールを知っていますが、CSSの属性をたくさん変更しなければならないでしょう...これを簡単に行う方法ではなく、コードをほとんど変更せずにすべての画面サイズで機能する方法ですか? Chromeに実装されているズームと同じです。 – Arnaud

+0

'' – pawel

答えて

1

あなたはすでにタグに「反応性の高い」タグを入れています。つまり、応答性の高いWebサイトが必要であることがわかります。

あなたは特定の幅の上mediaqueriesを作成し、適切な値にズームプロパティを設定する(ただし、Firefoxはこれをサポートしていません:http://caniuse.com/#search=zoom;トランスフォームを使用することができます:スケール()フォールバックなど)ができます。

例:

@media (max-width: 600px) { 
    body { 
    zoom: 0.75; 
    moz-transform: scale(0.75, 0.75); 
    } 
} 

最善の解決策は、特定の幅の上mediaqueriesを作成し、要素の幅のを変更する手間を取ることであろう。私はなぜ幅が簡単に変更できないのかわかりません。

例:

@media (max-width: 600px) { 
    .myElement { 
    width: 600px; /* whatever, maybe 100%? */ 
    } 
} 
+0

素晴らしい! 「ズーム」ルールは、私が探していたものです。私は本当に私の場合、これが最良の解決策だと思っています。 – Arnaud

1

開始のためにあなたのページの<head>にこのmetaタグが含ま:上記

<meta viewport="width=device-width, initial-scale=1.0"> 

は、モバイルデバイスに拡張するウェブサイトを強制します。しかし、あなたはmedia queries

あなたは異なる画面サイズごとに異なるルールを作成することができます使用していくつかのより多くの作業を行う必要があります:あなたはすべての画面用のピクセル単位で異なるサイズにあなたのページの幅を設定することができます

@media(max-width: 768px){ 
    /** Small Mobile Screens */ 
} 

@media(min-width: 768px){ 
    /** Large Mobile Screens, tablets e.t.c */ 
} 

@media(min-width: 992px){ 
    /** Desktops, Laptops */ 
} 

@media(min-width: 1200px){ 
    /** Larger Screens (Desktops, Laptops, e.t.c) */ 
} 

関連する問題