CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのメディアクエリを使用したレスポンシブWebデザイン

メディアクエリは、モバイル、デスクトップなどのさまざまなサイズのデバイスのさまざまなスタイルルールのCSS手法です。

以下は、CSSでのメディアクエリとレスポンシブウェブデザインを示すコードです-

例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   color: white;
}
@media only screen and (max-width: 600px) {
   body {
      background: rgb(207, 60, 151);
   }
}
@media only screen and (min-width: 600px) {
   body {
      background: rgb(0, 128, 107);
   }
}
@media only screen and (min-width: 768px) {
   body {
      background: rgb(226, 136, 18);
   }
}
@media only screen and (min-width: 992px) {
   body {
      background: rgb(108, 25, 185);
   }
}
@media only screen and (min-width: 1200px) {
   body {
      background: rgb(13, 124, 63);
   }
}
</style>
</head>
<body>
<h1>Media queries example</h1>
<h2>Resize the screen to see background color change on different breakpoints</h2>
</body>
</html>

出力

上記のコードは次の出力を生成します-

CSSのメディアクエリを使用したレスポンシブWebデザイン


  1. CSSで一般的なデバイスブレークポイントにメディアクエリを使用するにはどうすればよいですか？

    CSSを使用して一般的なデバイスブレークポイントにメディアクエリを使用するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style>    body {       font-family: "Segoe UI", Tahoma,

  2. CSS min（）関数を使用したレスポンシブロゴの作成（メディアクエリは含まれません）

    CSS min（）関数を使用して、Webページにレスポンシブロゴを作成できます。 CSS属性に最小値を指定できます。 構文 CSS min（）プロパティの構文は次のとおりです- Selector {    attribute: min(/*value*/,/*value*/); } 例 次の例は、CSS min（）プロパティを示しています。 <!DOCTYPE html> <html>    <head>       <style>