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. </head>
  9. <body>
  10.     <!-- 前提：在宽度受限，高度不受限制的空间内进行布局，至少一个受限 -->
  11.     <button class="btn small">按钮1</button>
  12.     <button class="btn middle">按钮2</button>
  13.     <button class="btn large">按钮3</button>
  15.     <style>
  16.         html {
  17.             font-size: 10px;
  18.         }
  20.         .btn{
  21.             background-color: seagreen;
  22.             color:white;
  23.             border: none;
  24.             outline: none;
  25.         }
  27.         .btn:hover{
  28.             cursor: pointer;
  29.             opacity: 0.7;
  30.             transition: 0.3s;
  31.             padding: 0.4rem 0.8rem;
  32.         }
  34.         .btn.small{
  35.             font-size: 1.2rem;   
  36.         }
  38.         .btn.middle{
  39.             font-size: 1.6rem;   
  40.         }
  42.         .btn.large{
  43.             font-size: 2rem;   
  44.         }
  46.         /* 只要动态修改rem，就可以动态改变按钮大小 */
  47.         /* 方案1：移动优先 */
  48.           /* 375-414之间做主要参考 */
  49.         @media (max-width:374px){
  50.                 html{
  51.                     font-size:12px;
  52.                 }
  53.         }
  56.         /* 375-414之间做主要参考 */
  57.         @media only screen  and (min-width:375px) and (max-width:414px){
  58.                 html{
  59.                     font-size:14px;
  60.                 }
  61.         }
  63.         @media (min-width:415px){
  64.                 html{
  65.                     font-size:16px;
  66.                 }
  67.         }
  69.     </style>
  71. </body>
  72. </html>