>首页> IT >

观速讯丨解析媒体查询@media的使用(附代码演示)

时间:2022-08-07 16:56:06       来源:转载


(资料图)

什么是媒体查询

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。

1、媒体查询操作方式

实际操作为:对设备提出询问(称作表达式)开始,如果表达式结果为真,媒体查询中的CSS被应用,如果表达式结果为假,媒体查询内的CSS将被忽略。

2、媒体查询语法

@media screen and (max-width:600px) {        }

3、代码演示1qqq

                Document        

缩小到768px后的效果图

推荐学习:《web前端》

以上就是解析媒体查询@media的使用(附代码演示)的详细内容,更多请关注php中文网其它相关文章!

关键词: 相关文章 操作方式 条件表达式