どのように応答するCSSデザインを作ることができますか？

-4

1つの画面解像度で正しく表示されるHTMLページがありますが、他の解像度では表示されません。このページのCSSをすべての解像度で反応させるにはどうすればよいですか？どのように応答するCSSデザインを作ることができますか？

出典

2017-07-17 idan

良い質問ですが、おそらくWeb上で応答性やメディアクエリについて調べてみるべきでしょう。 – bhansa

ようこそSOへようこそ、質問の方法に関するヘルプセクションをお読みください。 –

ようこそスタックオーバーフロー！あなたの質問は非常に広範であり、多くのチュートリアルや記事がこのテーマに書かれています。 [ask]をお読みください。主なフレーズ：「検索と研究」と「他の人が問題を再現するのを助ける」 –

あなたはそれはあなたが非常に容易と応答Webページを作るのに役立ちますBootstrap W3schools からそれを学ぶ

ブートストラップ3を使用することができます。

出典

2017-07-17 12:58:13

<meta name="viewport" content="width=device-width, initial-scale=1"><head>タグ内にHTMLを保管してください。

CSSファイルの内部：異なる画面解像度に@media screen and (max-width: <screen-width>px)を使用してください。

例：

HTML：

<html> 
     <head> 
      <title>this is title</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1">   
     </head> 
     <body> 
      <div class="test"> 
      <!--do something--> 
      </div> 
     </body> 
    </html>

CSS：

.test{ 
background: red; 
width: 100%; 
height: 500px; 
} 

/*for screen width of 786px*/ 
@media screen and (max-width: 786px){ 
    .test{ 
    background: blue; 
    } 
} 

/*for screen width of 300px*/ 
@media screen and (max-width: 300px){ 
    .test{ 
    background: green; 
    } 
}

今すぐブラウザウィンドウのサイズを変更し、応答性の効果を参照してください。

出典

2017-07-17 13:04:31

どのように応答するCSSデザインを作ることができますか？

答えて

関連する問題