媒体查询介绍
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了媒体查询介绍相关的知识，希望对你有一定的参考价值。
媒体查询：去检测设备的特性（手机端编程使用）
媒体查询可以让我们获取根据设备显示器的特性（如视口的宽度、屏幕的比例、设备的方向：横向或者纵向）
为其设定css样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测媒体的特性有width、height
和color（等）。使用媒体查询，可以在不改变页面的情况下，为特定的一些输出设备指定显示效果。
媒体查询操作方式
实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的css被应用，如果表达式为假，媒体查询内的css将被忽略。
媒体查询结构：
@media all and（min-width:320px）{
body{backgroud-color:blue}
}
改变body的小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打到尺寸改变body的颜色</title>
<style type="text/css">
body{
background: orange;
}
@media screen and (min-width:1000px) and (max-width:1300px) {
body{
background: red;
}
}
/* and俩端必须要加空格 */
@media screen and (min-width:750px) and (max-width:999px) {
body{
background: green;
}
}
</style>
</head>
<body>
</body>
</html>
手机横竖屏：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@media screen and (orientation:portrait) {
body{
background: orange;
}
}
@media screen and (orientation:landscape) {
body{
background: blue;
}
}
</style>
</head>
<body>
</body>
</html>
以上是关于媒体查询介绍的主要内容，如果未能解决你的问题，请参考以下文章