css之魔盒及媒体查询

写在前言
/ 重置方法 /
```
   .box {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
```
/ 写在前言:像素单位 px em=16px rem=font-size vh/vw=均等分 /
/ 媒体: 屏幕, 打印机 /
/ 查询: 查询当前屏幕宽度变化 /
/ btn增加样式 /

代码如下：含注释

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>魔盒及媒体查询</title>
 <style>
   html {
     font-size: 10px;
   }
   /* 重置方法 */
   /* .box {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   } */
   /* 写在前言:像素单位  px  em=16px  rem=font-size vh/vw=均等分  */
   /* 媒体: 屏幕, 打印机 */
   /* 查询: 查询当前屏幕宽度变化 */
   /* btn增加样式 */
   .btn {
     background-color: gray;
     color: white;
     border: none;
     outline: none;
   }
   /* 增加btn效果 */
   .btn:hover {
     /* 鼠标移动至目标时变形状 cursor */
     cursor: pointer;
     /* 改变透明度opacity */
     opacity: 0.4;
     /* 动画时间transition */
     transition: 0.4s;
   }
   .btn.small {
     /* 改变大小 */
     font-size: 1.2rem;
     /* 改变边距 */
     padding: 2rem 4rem;
   }
   .btn.middle {
     /* 改变大小 */
     font-size: 2rem;
     /* 改变边距 */
     padding: 2rem 4rem;
   }
   .btn.large {
     /* 改变大小 */
     font-size: 2.6rem;
     /* 改变边距 */
     padding: 2rem 4rem;
   }
   /* !动态改变rem大小就可以跳转按钮大小
    pc优先,从最大的屏幕开始查询 */
   @media (max-width: 720px) {
     html {
       font-size: 20px;
     }
   }
   @media (max-width: 480px) {
     html {
       font-size: 18px;
     }
   }
   @media (max-width: 360px) {
     html {
       font-size: 14px;
     }
   }
   @media (min-width: 720px) {
     html {
       font-size: 20px;
     }
   }
 </style>
</head>
<body>
 <div class="box"></div>
 <button class="btn small">按钮1</button>
 <button class="btn middle">按钮2</button>
 <button class="btn large">按钮3</button>
</body>
</html>

#css之魔盒及媒体查询

css之魔盒及媒体查询

相关文章