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

【响应式设计（CSS媒体查询介绍和用法指南）】媒体查询用于创建响应式网页设计。这意味着基于屏幕或媒体类型, 网页视图因系统而异。
媒体查询可用于检查许多内容：

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

媒体查询由一种媒体类型组成, 该媒体类型可以包含一个或多个可以为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 >

输出如下：