响应式设计：CSS媒体查询介绍和用法指南

2021年3月26日16:26:17 发表评论 683 次浏览

媒体查询用于创建响应式网页设计。这意味着基于屏幕或媒体类型, 网页视图因系统而异。

媒体查询可用于检查许多内容：

视口的宽度和高度
设备的宽度和高度
方向
解析度

媒体查询由一种媒体类型组成, 该媒体类型可以包含一个或多个可以为true或false的表达式。如果指定的媒体与显示文档的设备类型匹配, 则查询结果为true。如果媒体查询为true, 则应用样式表。

语法如下：

@media not | only mediatype and (expression) {
    // Code content
}

例子：

<!DOCTYPE html>
< html >
     < head >
         < title >CSS media query</ title >
         < style >
             body {
                 text-align:center;
             }
             .gfg {
                 font-size:40px;
                 font-weight:bold;
                 color:green;
             }
             @media screen and (max-width:800px) {
                 body {
                     text-align:center;
                     background-color:green;
                 }
                 .gfg {
                     font-size:30px;
                     font-weight:bold;
                     color:white;
                 }
                 .geeks {
                     color:white;
                 }
             }
             @media screen and (max-width:500px) {
                 body {
                     text-align:center;
                     background-color:blue;
                 } 
             }
         </ style >
     </ head >
     < body >
         < div class = "gfg" >lsbin</ div >
         < div class = "geeks" >A computer science portal for geeks</ div >
     </ body >
</ html >

输出如下：