1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <title>媒体查询</title>
  8.         <style>
  9.             html {
  10.                 padding: 0;
  11.                 margin: 0;
  12.                 font-size: 10px;
  13.             }
  14.             .btn {
  15.                 background-color: seagreen;
  16.                 color: white;
  17.                 outline: none;
  18.                 border: none;
  19.                 border-radius: 3px;
  20.                 padding: 0.4rem 0.8rem;
  21.             }
  22.             .btn:hover {
  23.                 opacity: 0.8;
  24.                 cursor: pointer;
  25.                 transition: 0.3s;
  26.             }
  27.             .btn.small {
  28.                 font-size: 1.2rem;
  29.             }
  30.             .btn.middle {
  31.                 font-size: 1.6rem;
  32.             }
  33.             .btn.large {
  34.                 font-size: 1.8rem;
  35.             }
  36.             @media (max-width: 374px) {
  37.                 html {
  38.                     font-size: 12px;
  39.                 }
  40.             }
  41.             @media (min-width: 375px) and (max-width: 414px) {
  42.                 html {
  43.                     font-size: 14px;
  44.                 }
  45.             }
  46.             @media (min-width: 415px) {
  47.                 html {
  48.                     font-size: 16px;
  49.                 }
  50.             }
  51.         </style>
  52.     </head>
  53.     <body>
  54.         <button class="btn small">按钮1</button>
  55.         <button class="btn middle">按钮2</button>
  56.         <button class="btn large">按钮3</button>
  57.     </body>
  58. </html>