媒体查询 响应式布局

响应式布局

meta标签的实用

设置布局宽度等于设备宽度，布局viewport等于度量viewport

<meta name="viewport" content="width=device-width,initial-scale=1">
媒体查询

@media screen and (max-width:960px){....}
<link rel="stylesheet" media="screen and (max-width:960px)" href='xxx.css' />
媒体查询的css标识符是@media，它的媒体类型可以分为：

all， 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech ‘听觉’类似的媒体类型
tty 不适用像素的设备
tv 电视
代码示例：

@media screen {
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print {
p.test {font-weight:bold;}
}
/移动端样式/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
媒体查询的主要原理：它像是给整个css样式设置了断点，通过给定的条件去判断，在不同的条件下，显示不同的样式。例如：手机端的尺寸在750px，而PC端则是大于750px的，我们可以将样式写成：

@media screen and (min-width: 750px){
.media{
height: 100px;
background: red;
}
}

@media (max-width: 750px){
.media{
height: 200px;
background: green;
}
}