媒体查询

Posted 2023-03-26 土著古rust语言学习

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了媒体查询相关的知识，希望对你有一定的参考价值。

媒体查询

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

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

设置meta标签

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

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

width=device-width宽度等于当前设备的宽度
initial-scale初始的缩放比例(默认设置为1.0)
maximum-scale允许用户缩放到的最大比例(默认设置为1.0)
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;

以上是关于媒体查询的主要内容，如果未能解决你的问题，请参考以下文章