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.     <link rel="stylesheet" href="./黑马/图片/京东/download/font_3459154_oua9l2daqpe/iconfont.css">
  8.     <title>Document</title>
  9. </head>
  10. <style>
  11.     @media (min-width: 1200px) {
  12.         html {
  13.           font-size: 18px;
  14.         }
  15.         span{
  16.           color: red;
  17.         }
  18.       }
  19.       @media (max-width: 720px) {
  20.         html {
  21.           font-size: 16px;
  22.         }
  23.         span{
  24.           color: blue;
  25.         }
  26.       }
  27.       @media (max-width: 640px) {
  28.         html {
  29.           font-size: 14px;
  30.         }
  31.         span{
  32.           color: lightcoral;
  33.         }
  34.       }
  35.       @media (max-width: 480px) {
  36.         html {
  37.           font-size: 12px;
  38.         }
  39.         span{
  40.           color: lightgreen;
  41.         }
  42.       }
  43.   .box{
  44.     width:40rem;
  45.     height:20rem;
  46.     background-color: seagreen;
  47.   }
  48. </style>
  49. <body>
  50.     <div class="box">
  51.         <span class="iconfont icon-huiyuanzhongxin"></span>
  52.     </div>
  53. </body>
  54. </html>