526互联

媒体查询

发布时间 2023-03-26 20:59:43作者: 土著古

媒体查询

媒体查询能使页面在不同在终端设备下达到不同的效果

媒体查询根据设备的大小自动识别加载不同的样式

设置meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放.在<head>标签里加入这个meta标签.

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">
  1. width=device-width宽度等于当前设备的宽度
  2. initial-scale初始的缩放比例(默认设置为1.0)
  3. maximum-scale允许用户缩放到的最大比例(默认设置为1.0)
  4. user-scalable用户是否可以手动缩放(默认设置为no)
     @media screen and (max-width:768px){
            /* 设备小于768px加载样式 */
            body{
                background-color: red;
            }
        }
           /* 设备大于于768px但小于992px加载样式 */
        @media screen and (max-width:992px)and (min-width:768px){
            body{
                background-color: pink;
            }
        }
         /* 设备大于于992px加载样式 */
        @media screen and (min-width:992px){
            body{
                background-color: green;
            }
        }