博客列表 >手机端媒体查询

手机端媒体查询

万分之一
万分之一原创
2022年01月25日 18:33:49528浏览
  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>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议