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

#css之魔盒及媒体查询

程序员文章站 2022-03-15 23:51:03
...

css之魔盒及媒体查询

  1. 写在前言
    / 重置方法 /
      

    1.    .box {
      2. 

    2.      margin: 0;
      3. 

    3.      padding: 0;
      4. 

    4.      box-sizing: border-box;
      5. 

    5.    }
      6.
    / 写在前言:像素单位 px em=16px rem=font-size vh/vw=均等分 /
    / 媒体: 屏幕, 打印机 /
    / 查询: 查询当前屏幕宽度变化 /
    / btn增加样式 /

  2. 代码如下：含注释

      

    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.      font-size: 10px;
      11. 

    11.    }
      12. 

    12.    /* 重置方法 */
      13. 

    13.    /* .box {
      14. 

    14.      margin: 0;
      15. 

    15.      padding: 0;
      16. 

    16.      box-sizing: border-box;
      17. 

    17.    } */
      18. 

    18.    /* 写在前言:像素单位  px  em=16px  rem=font-size vh/vw=均等分  */
      19. 

    19.    /* 媒体: 屏幕, 打印机 */
      20. 

    20.    /* 查询: 查询当前屏幕宽度变化 */
      21. 

    21.    /* btn增加样式 */
      22. 

    22.    .btn {
      23. 

    23.      background-color: gray;
      24. 

    24.      color: white;
      25. 

    25.      border: none;
      26. 

    26.      outline: none;
      27. 

    27.    }
      28. 

    28.    /* 增加btn效果 */
      29. 

    29.    .btn:hover {
      30. 

    30.      /* 鼠标移动至目标时变形状 cursor */
      31. 

    31.      cursor: pointer;
      32. 

    32.      /* 改变透明度opacity */
      33. 

    33.      opacity: 0.4;
      34. 

    34.      /* 动画时间transition */
      35. 

    35.      transition: 0.4s;
      36. 

    36.    }
      37. 

    37.    .btn.small {
      38. 

    38.      /* 改变大小 */
      39. 

    39.      font-size: 1.2rem;
      40. 

    40.      /* 改变边距 */
      41. 

    41.      padding: 2rem 4rem;
      42. 

    42.    }
      43. 

    43.    .btn.middle {
      44. 

    44.      /* 改变大小 */
      45. 

    45.      font-size: 2rem;
      46. 

    46.      /* 改变边距 */
      47. 

    47.      padding: 2rem 4rem;
      48. 

    48.    }
      49. 

    49.    .btn.large {
      50. 

    50.      /* 改变大小 */
      51. 

    51.      font-size: 2.6rem;
      52. 

    52.      /* 改变边距 */
      53. 

    53.      padding: 2rem 4rem;
      54. 

    54.    }
      55. 

    55.    /* !动态改变rem大小就可以跳转按钮大小
      56. 

    56.     pc优先,从最大的屏幕开始查询 */
      57. 

      58. 

    58.    @media (max-width: 720px) {
      59. 

    59.      html {
      60. 

    60.        font-size: 20px;
      61. 

    61.      }
      62. 

    62.    }
      63. 

    63.    @media (max-width: 480px) {
      64. 

    64.      html {
      65. 

    65.        font-size: 18px;
      66. 

    66.      }
      67. 

    67.    }
      68. 

    68.    @media (max-width: 360px) {
      69. 

    69.      html {
      70. 

    70.        font-size: 14px;
      71. 

    71.      }
      72. 

    72.    }
      73. 

    73.    @media (min-width: 720px) {
      74. 

    74.      html {
      75. 

    75.        font-size: 20px;
      76. 

    76.      }
      77. 

    77.    }
      78. 

    78.  </style>
      79. 

    79. </head>
      80. 

    80. <body>
      81. 

    81.  <div class="box"></div>
      82. 

    82.  <button class="btn small">按钮1</button>
      83. 

    83.  <button class="btn middle">按钮2</button>
      84. 

    84.  <button class="btn large">按钮3</button>
      85. 

    85. </body>
      86. 

    86. </html>
      87.

上一篇： php父子进程通信

下一篇： JS获取当前网页大小以及屏幕分辨率等_javascript技巧

推荐阅读