レスポンシブウェブサイト

Question

ウェブサイトを作成するプロジェクトがありますが、私は手動でブートストラップを使用しません。 問題は、ズームインしてズームアウトしたときに反応しないことです。 どのようなタイプの画面でもレスポンシブウェブサイトを作成する方法、ズームイン/ズームアウトするときはどうすればいいですか？あなただけの http://www.w3schools.com/css/css_rwd_mediaqueries.asp

：あなたには、いくつかのメディアクエリを使用することができますCSS3とともに

.wadah{ 
    width:83.8%; 
    height:1000px; 
    position:absolute; 
    z-index:1; 
    top:650px; 
    left:102px; 
    background:white; 
    border:1px solid #d2d1d1} 
.top-news{ 
    width: 1125px; 
    height:220px; 
    background:#; 
    border-bottom:1px solid #d2d1d1} 
.top-news-inside{ 
    width:281.25px; 
    height:220px; 
    float:left; 
    padding:20px; 
    box-sizing:border-box; 
    background:#; 
    } 
.content{ 
    width:1125px; 
    height:auto; 
    background:#} 
.content-left{ 

    } 

Answer 1

;：ここに は私のCSSコードは

体{ 'モントセラト'、サンセリフフォントファミリ}です適切なブレークポイントを選択し、現在のスタイルを書き直さなければなりません。たとえば、float: leftの要素をすべてメディアクエリのfloat: noneプロパティに加え、その幅を画面の100%に拡張することができます（top-news-insideクラスにこの変更を加えることができます）。これにより、サイトが列に分割されます。浮動要素を制御する

あなたはclear: bothルールを使用してくださいしてください： http://www.w3schools.com/css/css_float.asp

Answer 2

ヘッダにこれを追加します。

<link rel="stylesheet" type="text/css" href="responsive.css"> 

はあなたの応答作るためresponsive.css

などのCSSファイルを作成しますさまざまなサイズのCSSコードを変更する必要があります

例：

@media only screen and (max-width: 360px) { 
.wadah{ 
    height:200px; 
    top:350px; 
    left:52px; 
} 
} 

または

@media only screen and (max-width: 640px) { 
.wadah{ 
    height:400px; 
    top:500px; 
    left:80px; 
} 
} 

*大きなサイズは*高くする必要がありますあなたが

（モバイルナビゲーションバーを色を変えたりすることのような）サイズを変更するよりも多くの操作を行うことができ、これと

これが便利だといいですか？

悪い英語で申し訳ありません：D