媒体查询
媒体查询是可以让网页适用于不同大小屏幕的，写媒体查询时要注意：主样式在前，媒体查询样式在后。
媒体查询的条件写法，可以从小到大，也可以从大到小，也可以区间取值。
媒体查询的写法：@ media all/screen and (最小值/最大值/区间值)，all/screen表示所有屏幕尺寸，包括投影仪、打印机、手机、电脑等。
媒体查询的引入方式有两种：内嵌式和外联式。
内嵌式
<style>
.block{
height: 2000px;
border: 1px solid red;
margin: 0 auto;
}
由小到大的区间取值写法：
@media all and (min-width: 768px) and (max-width: 1024px) {
.block{
width: 680px;
background-color: yellow;
}
}
@media all and (min-width: 1024px) and (max-width: 1380px) {
.block{
width: 1024px;
background-color: blue;
}
}
@media all and (min-width: 1580px) {
.block{
width: 1190px;
background-color: red;
}
}
由小到大的写法：
@media all and (min-width: 768px) {
.block{
width: 680px;
background-color: yellow;
}
}
@media all and (min-width: 1024px) {
.block{
width: 768px;
background-color: blue;
}
}
@media all and (min-width: 1580px) {
.block{
width: 1190px;
background-color: red;
}
}*/
由大到小的写法：
@media all and (max-width: 1580px) {
.block{
width: 1190px;
background-color: red;
}
}
@media all and (max-width: 1024px) {
.block{
width: 768px;
background-color: blue;
}
}
@media all and (max-width: 768px) {
.block{
width: 680px;
background-color: yellow;
}
}
</style>
</head>
<body>
<div class="block">
</div>
</body>
外联式
<title></title>
<link rel="stylesheet" media="all and (min-width:320px) and (max-width:767px)" href="320.css">
<link rel="stylesheet" media="all and (min-width:768px) and (max-width:1023px)" href="768.css">
<link rel="stylesheet" media="all and (min-width:1024px)" href="1024.css">
</head>手机自适应
它的作用是覆盖默认的画布（网页）缩放设置，用viewport meta表示，也就是在hear部分再加一个<meta>值，一个网页里面可以有多个<meta>.写法如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>其中：name=”viewport”表示这个meta的属性是“视口”的意思
content=”width=device-width表示适可的宽度（浏览器页面的宽度等于设备宽度 ）
initial-scale=1.0表示伸缩比例为1:0（即将页面放大一倍）
minimum-scale=1.0,maximum-scale=1.0表示最小放大比例为1和最大放大比例为1（即将页面最大放大至设备宽度1倍，最小压缩至设备宽度的一倍）
user-scalable=no其中 user-scalable表示用户适可缩放，那整个意思表示禁止用户缩放
强制性兼容：
<meta http-equire=”X-UA-Compatible” content=”IE=edge,chrome=1″>
不同浏览器兼容样式：
-ms- IE浏览器（+ * _表示不同版本IE浏览器）
-moz-火狐
-webkit-谷歌
<style>
*{
width: 100px;
+width:100px;
*width:100px;
_width:100px;
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
css hank 是不同版本IE浏览器的兼容：
只在IE下生效：<!–[if IE]>在IE浏览器显示<![endif]–>
只在IE6下生效：<!–[if IE 6]>在IE6浏览器显示<![endif]–>
只在IE6以上版本生效：<!–[if gte IE 6]>在IE6以上(包括)版本IE浏览器显示<![endif]–>
只在IE6上不生效：<!–[if ! IE 6]>在非IE6浏览器显示<![endif]–>
非IE浏览器生效：<!–[if !IE]>在非IE浏览器显示<![endif]–>
正常情况下，在缩放网页宽度时会出现滚动条，要想不出现滚动条就需要对网页写入媒体查询。一般用来检测手机媒体查询的页面宽度为320px。
像素几种常用的表示：
px,固定的单位值，开发人员常用；
rem,1rem=16px,默认比例，会随着页面margin，padding像素px的设置变化比例；
em，单位 相对于根节点的比例值；
vmax，100个单位划分的比例值；
%，相对于父元素的比例值。
