媒体查询

2018-08-18

字数统计: 1k字 | 阅读时长≈ 4分

媒体查询

设备终端的多样化，直接导致了网页的运行环境变的越来越复杂，为了能够保证我们的网页可以适应多个终端，不得不专门为某些特定的设备设计不同的展示风格，通过媒体查询可以检测当前网页运行在什么终端，可以有机会实现网页适应不同终端的展示风格。

超小屏幕	移动设备	<768px
小屏设备	ipad	768px<W<992px
中等屏幕	电脑中屏	992px<W<1200px
宽屏设备	电脑大屏	W>1200px

媒体查询语法

关键字

将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

1、and 可以将多个媒体特性连接到一起，相当于“且”的意思。

2、not 排除某个媒体类型，相当于“非”的意思，可以省略。

3、only指定某个特定的媒体类型，可以省略。

媒体类型

将不同的终端设备划分成不同的类型，称为媒体类型。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
/*宽度小于768  max-width: 768px:说明当前屏幕的最大值为768px,也就意味着条件就是屏幕的宽度需要小于768px*/
@media screen and (max-width: 768px) {
	body{		background-color: green;
}}
/*w:768~992:*/
@media screen and (min-width: 768px) and (max-width: 992px) {
	body {
		background-color: blue;
	}
}
/*992~1200*/
@media screen and (min-width: 992px) and (max-width: 1200px) {
	body {
		background-color: pink;
	}
}
/*w>1200*/
@media screen and (min-width: 1200px) {
	body {
		background-color: purple;
	}
}

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。

1、width / height完全等于layoutviewport

2、max-width / max-height 小于等于layoutviewport

3、min-width / min-height 大于等于layoutviewport

4、device-width / device-height 完全等于idealviewport

5、orientation: portrait | landscape肖像/全景模式

body{	
	background-color: red;
}
/*min-width:在pc端和移动端能正常的响应，效果一致  。它是指当前可视区域的宽度*/
/*
	min-device-width:在移动端和期望值一样  
	device：设备。它是指当前设备的宽度。  
	但是在pc端，当拖动来改变浏览器大小的时候，pc端设备的宽度并不会变化，意味着媒体查询条件不会响应
*/

@media screen  and (min-device-width: 768px){	
	body{		
		background-color: green;	
	}
}
@media screen  and (min-device-width: 992px){	
	body{		
		background-color: blue;	
	}
}

媒体查询的引入

1、link方法

1
2

/*通过媒体查询调用相应的样式文件*/
<link  href="./5-1.css"  media="only screen and (max-width: 320px)"><link rel="stylesheet" media="screen and (min-width:992px) and (max-width:1200px)" href="b.css">

2、@media方法（写在CSS里）

body {
	background-color: red;
}
/*当屏幕宽度不在768到992之间，body颜色为蓝色。反之取红色*/
@media not screen and (min-width: 768px) and (max-width: 992px) {
	body {
		background-color: blue;
	}
}

使用媒体查询设置页面结构

/*需求：	   
w < 768    每一行放置一个子元素  子元素宽度为父容器宽度100%       
w 768~992  每一行放置两个子元素  50%       
w 992~1200 每一行放置三个子元素  33.33%       
w >1200    每一行放置四个子元素 25%*/
<div class="box">    
	<div></div>    
	<div></div>    
	<div></div>    
	<div></div>    
	<div></div>    
	<div></div>
</div>
<style>        
* {
	padding: 0;
	margin: 0;
}

.box {
	width: 100%;
	height: 200px;
	background-color: #ccc;
}

.box > div {
	width: 100%;
	height: 100%;
	background-color: skyblue;
	box-sizing: border-box;
	border-right: 2px solid blue;
	border-bottom: 2px solid blue;
	float: left;
}        
/*w 768~992  每一行放置两个子元素  50%*/
@media screen and (min-width: 768px) {
	.box > div {
		width: 50%;
	}
}        
/* w 992~1200 每一行放置三个子元素  33.33%*/
@media screen and (min-width: 992px) {
	.box > div {
		width: 33.33%;
	}
}        
/*w >1200 每一行放置四个子元素 25%*/
@media screen and (min-width: 1200px) {
	.box > div {
		width: 25%;
	}
}
</style>
}
}

本文作者： gtt
本文链接： https://gtt011029.github.io/posts/54340/