欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

手机端媒体查询

程序员文章站 2022-03-07 18:44:31
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.     <head>
    4. 

  4.         <meta charset="UTF-8" />
    5. 

  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.         <title>媒体查询</title>
    8. 

  8.         <style>
    9. 

  9.             html {
    10. 

  10.                 padding: 0;
    11. 

  11.                 margin: 0;
    12. 

  12.                 font-size: 10px;
    13. 

  13.             }
    14. 

  14.             .btn {
    15. 

  15.                 background-color: seagreen;
    16. 

  16.                 color: white;
    17. 

  17.                 outline: none;
    18. 

  18.                 border: none;
    19. 

  19.                 border-radius: 3px;
    20. 

  20.                 padding: 0.4rem 0.8rem;
    21. 

  21.             }
    22. 

  22.             .btn:hover {
    23. 

  23.                 opacity: 0.8;
    24. 

  24.                 cursor: pointer;
    25. 

  25.                 transition: 0.3s;
    26. 

  26.             }
    27. 

  27.             .btn.small {
    28. 

  28.                 font-size: 1.2rem;
    29. 

  29.             }
    30. 

  30.             .btn.middle {
    31. 

  31.                 font-size: 1.6rem;
    32. 

  32.             }
    33. 

  33.             .btn.large {
    34. 

  34.                 font-size: 1.8rem;
    35. 

  35.             }
    36. 

  36.             @media (max-width: 374px) {
    37. 

  37.                 html {
    38. 

  38.                     font-size: 12px;
    39. 

  39.                 }
    40. 

  40.             }
    41. 

  41.             @media (min-width: 375px) and (max-width: 414px) {
    42. 

  42.                 html {
    43. 

  43.                     font-size: 14px;
    44. 

  44.                 }
    45. 

  45.             }
    46. 

  46.             @media (min-width: 415px) {
    47. 

  47.                 html {
    48. 

  48.                     font-size: 16px;
    49. 

  49.                 }
    50. 

  50.             }
    51. 

  51.         </style>
    52. 

  52.     </head>
    53. 

  53.     <body>
    54. 

  54.         <button class="btn small">按钮1</button>
    55. 

  55.         <button class="btn middle">按钮2</button>
    56. 

  56.         <button class="btn large">按钮3</button>
    57. 

  57.     </body>
    58. 

  58. </html>
    59.

上一篇： 详细介绍PHP中操作数据库的预处理语句（附代码）

下一篇： php.ini没有extension怎么办

推荐阅读