聊聊最近接触的媒体查询！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了聊聊最近接触的媒体查询！相关的知识，希望对你有一定的参考价值。
1.首先什么是媒体查询？
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
通俗点说就是利用媒体查询我们可以让一套代码兼容不同的屏幕如电脑、pad、手机登。
2。媒体查询怎么用？
在介绍怎么用媒体查询之前，我们先说下媒体查询操作的是什么？答案就是样式属性如width、height、font-size、color等。在什么里面可以使用媒体查询呢？首先我们想到的肯定是css中，其次就是也可以在JS里面去使用。
接下来我们先看看在css中怎么使用。上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style>
#box { //设备屏幕宽度尺寸小于768px时，这段样式会起作用
width: 100px;
height: 100px;
font-size: 16px;
color: gold;
background-color:gray;
}
@media only screen and (min-width: 768px) {
#box { //设备屏幕宽度尺寸大于768px时，这段样式会起作用
width:300px;
height:300px;
font-size: 24px;
color: white;
background-color:black;
}
}
</style>
</head>
<body>
<div id="box">媒体查询</div>
</body>
</html>
我们来看看这句代码@media only screen and (min-width: 768px) ，这就是在CSS中使用媒体查询的常见语法注意括号中的min-width: 768px，就是这段样式起作用的条件即这段样式起作用的最小屏幕宽度，屏幕宽度小于它是不起作用的。除了min-width,也可以使用max-width来作为条件。
说到这里可能有的人就会问那如果我想要这段样式在特定的宽度区间内起作用该怎么写呢？很简单
@media screen and (min-width:320px) and (max-width:720px) ，即当设备屏幕宽度在320px——720px之间时，样式才会生效。
细心地同学可能注意到这句代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 那么这条代码是用来干嘛的呢？
我们先看下它里面的几个属性：
width=device-width:宽度等于当前设备的宽度（height类似于width）
initial-scale=1：初始的缩放比例（默认为1）
maximum-scale=1：允许用户缩放到得最大比例（默认为1）
user-scalable=no：用户不能手动缩放
其实这段代码作用就是让当前viewport的宽度等于设备的宽度,同时缩放比例为1.0.
看到这里可能就有什么说：“哇，媒体查询好简单啊！”我只想说一句 too young too simple!!!
为什么呢，因为这种单页面样式写起来的确很简单，但是在真正的项目中，css文件可能会有几个甚至十几个，这时候问题来了！当我们再用这种写法去写的时候你会郁闷死，因为同样的写法在单页面样式里面起作用而在大的项目代码中可能就会失效！！！！对，就是你满心欢喜的写了一大堆，长舒一口气，哇终于写完了！但是.....然并卵，你会发现没起作用。这时候就懵逼了（我就遇到过..........），原因也很简单，css样式是有优先级的，也就是
@media only screen and (min-width: 768px) {
#box { //设备屏幕宽度尺寸大于768px时，这段样式会起作用
width:300px;
height:300px;
font-size: 24px;
color: white;
background-color:black;
}
}
这里面的样式会比这个页面不用媒体查询写的样式优先级要低，因此设备在解析的时候会优先查找到没有用媒体查询写的样式，这时候怎么办呢？好，他不是有优先级吗，我们让他处在同一个优先级上也就是这样写：
@media only screen and (max-width: 768px) {
#box { //设备屏幕宽度尺寸小于768px时，这段样式会起作用
width:300px;
height:300px;
font-size: 24px;
color: white;
background-color:black;
}
}
@media only screen and (min-width: 768px) {
#box { //设备屏幕宽度尺寸大于768px时，这段样式会起作用
width:300px;
height:300px;
font-size: 24px;
color: white;
background-color:black;
}
}
这样的话他两的优先级就是一样的，这时候设备就会去判断当中的条件去使用符合相应条件的样式。这就是媒体查询在CSS中的用法。
接下来看看媒体查询在CSS中的写法
在我们写页面的时候样式可能并不只是在CSS文件中存在，有时也需要在JS中动态去设置。这时候如果还想让这些样式兼容不同的设备我们就可以再在JS中继续使用媒体查询。上代码
//JS媒体查询
var result = window.matchMedia(‘(min-width:768px)‘);
//console.log(window.innerWidth);
//console.log(result.matches);
if(result.matches){
console.log("768<= <=992 小型设备 平板电脑");
constants.WORK_ITEM_BUTTON_WIDTH = 40;
constants.WORK_ITEM_BUTTON_HEIGHT = 40;
constants.PHOTO_WIDTH = 200;
constants.PHOTO_HEIGHT = 200;
constants.PHOTO_CONTAINER_HEIGHT = ‘212px‘;
}else{
console.log("<=768 超小设备 手机");
constants.WORK_ITEM_BUTTON_WIDTH = 28;
constants.WORK_ITEM_BUTTON_HEIGHT = 28;
constants.PHOTO_WIDTH = 100;
constants.PHOTO_HEIGHT = 100;
constants.PHOTO_CONTAINER_HEIGHT = ‘112px‘;
}
//console.log(constants.WORK_ITEM_FONT_SIZE );
//console.log(constants.WORK_ITEM_BUTTON_WIDTH);
//console.log(constants.WORK_ITEM_BUTTON_HEIGHT);
利用window对象的matchMedia（）这个方法去检测当前设备屏幕的尺寸它返回一个MediaQueryList对象。该对象有两个属性
media：查询语句的内容。
matches：如果查询结果为真，值为true，否则为false，再根据返回的结果去给相应的属性设置值。
这就是媒体查询的两大用法，通过这两种方法我们可以轻松地去兼容不同屏幕尺寸的设备。
本文出自 “你是我今生倾心驻足的风景” 博客，谢绝转载！
以上是关于聊聊最近接触的媒体查询！的主要内容，如果未能解决你的问题，请参考以下文章
使用设备像素比媒体查询的 Firefox 63 Webkit CSS 问题