聊聊最近接触的媒体查询！
1.首先什么是媒体查询？css
媒体查询可让咱们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。使用媒体查询，能够在不改变页面内容的状况下，为特定的一些输出设备定制显示效果。html
通俗点说就是利用媒体查询咱们可让一套代码兼容不一样的屏幕如电脑、pad、手机登。ide
2。媒体查询怎么用？spa
在介绍怎么用媒体查询以前，咱们先说下媒体查询操做的是什么？答案就是样式属性如width、height、font-size、color等。在什么里面可使用媒体查询呢？首先咱们想到的确定是css中，其次就是也能够在JS里面去使用。
接下来咱们先看看在css中怎么使用。上代码scala
<!DOCTYPE html>orm
<html>htm
<head>对象
<meta charset="UTF-8">it
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>console
<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，再根据返回的结果去给相应的属性设置值。
这就是媒体查询的两大用法，经过这两种方法咱们能够轻松地去兼容不一样屏幕尺寸的设备。
- 1. SQL查询最近聊天记录
- 2. 聊聊最近的收获
- 3. 聊聊最近很火的eBPF
- 4. 聊聊jpa的动态查询
- 5. 媒体查询
- 6. 聊聊近况9.4
- 7. 聊一聊最近关于测试方面被咨询的问题
- 8. css-媒体查询
- 9. css3媒体查询
- 10. web媒体查询
- 更多相关文章...
- • PHP imagecolorclosest - 取得与指定的颜色最接近的颜色的索引值 - PHP参考手册
- • ADO 查询 - ADO 教程
- • 算法总结-二分查找法
- • Tomcat学习笔记（史上最全tomcat学习笔记）
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. SQL查询最近聊天记录
- 2. 聊聊最近的收获
- 3. 聊聊最近很火的eBPF
- 4. 聊聊jpa的动态查询
- 5. 媒体查询
- 6. 聊聊近况9.4
- 7. 聊一聊最近关于测试方面被咨询的问题
- 8. css-媒体查询
- 9. css3媒体查询
- 10. web媒体查询