介绍一下什么是媒体查询

互联网 20-10-21

学习媒体查询的核心是什么?

(推荐教程:html视频教程)

实现页面在不同设备下正常预览 [判断当前设备]

媒体类型

将不同的设备划分为不同的类型

all (所有的设备)

print (打印设备)

媒体特性

用来描述设备的特点,比如宽度,高度...

width 网页显示区域完全等于设置的宽度

height 网页显示区域完全等于设置的高度

max-width / max-height 网页显示区域小于等于设置的宽度

min-width / min-width 网页显示区域大于等于设置的宽度

orientation: portrait (竖屏模式) | landscape (横屏模式)

语法关键字

目的将媒体类型和媒体特性链接到一块,进行设备检测

and 可以将多个媒体特性链接到一块,相当于且

not 排除某个媒体特性 相当于非,可以省略

only 指定某个特定的媒体类型, 可以省略

语法

外联式语法

<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">
- 内嵌式语法       @media only screen  and (max-width: 420px) {       	body {       		background-color: red;       	}       }              备注: 多个条件联写       @media only screen and (width: 320px) and (height: 568px) {}

相关推荐:html教程

以上就是介绍一下什么是媒体查询的详细内容,更多内容请关注技术你好其它相关文章!

来源链接:
免责声明:
1.资讯内容不构成投资建议,投资者应独立决策并自行承担风险
2.本文版权归属原作所有,仅代表作者本人观点,不代表本站的观点或立场
标签: 媒体查询
上一篇:php获取远程图片并下载保存到本地的方法分析 下一篇:如何利用HTML5 canvas旋转图片?(实例演示)

相关资讯