media查询

当屏幕宽度满足特定条件时应用css。

例如：

  1. .container {
  2.     background-color: lightgray;
  3.     width: 80%;
  4.     margin: 0 auto;
  5.     padding: 10px;
  6. }
  8. .card {
  9.     width: 80%;
  10.     height: 100vh;
  11.     background-color: purple;
  12.     margin: 0 auto;
  13. }
  15. @media (min-width: 768px) {
  16.     .card {
  17.         background-color: lightgreen;
  18.     }
  19. }
  21. @media (min-width: 992px) {
  22.     .card {
  23.         background-color: lightpink;
  24.     }
  25. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="/static/css/style.css">
  10. </head>
  12. <body>
  13.     <div class="container">
  14.         <div class="row">
  15.             <div class="col col-md-4 col-sm-12">用户名</div>
  16.             <div class="col col-md-8 col-sm-12">密码</div>
  17.             <div class="col col-md-12 col-sm-12">个人简介</div>
  18.         </div>
  19.     </div>
  20. </body>
  22. </html>
  1. .container {
  2.     background-color: lightgray;
  3.     width: 80%;
  4.     margin: 0 auto;
  5.     padding: 10px;
  6.     height: 100vh;
  7. }
  9. .col {
  10.     height: 100px;
  11.     background-color: lightsalmon;
  12.     border: 1px solid gray;
  13.     float: left;
  14.     box-sizing: border-box;
  15.     font-size: 30px;
  16.     color: white;
  17.     text-align: center;
  18.     line-height: 100px;
  19. }
  21. @media(min-width: 768px) {
  22.     .col-md-1 {
  23.         width: 8.33333%;
  24.     }
  26.     .col-md-2 {
  27.         width: 16.6667%;
  28.     }
  30.     .col-md-3 {
  31.         width: 25%;
  32.     }
  34.     .col-md-4 {
  35.         width: 33.3333%;
  36.     }
  38.     .col-md-5 {
  39.         width: 41.6667%;
  40.     }
  42.     .col-md-6 {
  43.         width: 50%;
  44.     }
  46.     .col-md-7 {
  47.         width: 58.3333%;
  48.     }
  50.     .col-md-8 {
  51.         width: 66.6667%;
  52.     }
  54.     .col-md-9 {
  55.         width: 75%;
  56.     }
  58.     .col-md-10 {
  59.         width: 83.3333%;
  60.     }
  62.     .col-md-11 {
  63.         width: 91.6667%;
  64.     }
  66.     .col-md-12 {
  67.         width: 100%;
  68.     }
  69. }
  71. @media(max-width: 767px) {
  72.     .col-sm-1 {
  73.         width: 8.33333%;
  74.     }
  76.     .col-sm-2 {
  77.         width: 16.6667%;
  78.     }
  80.     .col-sm-3 {
  81.         width: 25%;
  82.     }
  84.     .col-sm-4 {
  85.         width: 33.3333%;
  86.     }
  88.     .col-sm-5 {
  89.         width: 41.6667%;
  90.     }
  92.     .col-sm-6 {
  93.         width: 50%;
  94.     }
  96.     .col-sm-7 {
  97.         width: 58.3333%;
  98.     }
  100.     .col-sm-8 {
  101.         width: 66.6667%;
  102.     }
  104.     .col-sm-9 {
  105.         width: 75%;
  106.     }
  108.     .col-sm-10 {
  109.         width: 83.3333%;
  110.     }
  112.     .col-sm-11 {
  113.         width: 91.6667%;
  114.     }
  116.     .col-sm-12 {
  117.         width: 100%;
  118.     }
  119. }