媒体化查询技术（相应式页面）

来源：互联网发布：chip数据编辑：程序博客网时间：2024/06/09 13:06

<meta
name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1,
minimum-scale=1, maximum-scale=1">

width=device-width :宽度等于当前设备的宽度

user-scalable=no：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

initial-scale=1：初始的缩放比例（默认设置为1.0）

minimum-scale=1：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale=1：允许用户缩放到的最大比例（默认设置为1.0）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>媒体化查询技术</title>
  <style>
   .divv{
    width: 100%;
    height: 200px;
    background-color: red;
   }
  /*
   媒体化查询技术根据屏幕的大小去响应显示的页面
   * */
   @media only screen and (max-width: 500px) {

    .divv{
     height: 50px;
     background-color: yellow;
    }
   }

  </style>

</head>
<body>
  <div class="divv">

  </div>

</body>
</html>

阅读全文

0 0