CSS3 @media查询 设置断点 实现响应式页面

使用@media可以针对不同的屏幕尺寸设置不同的样式，实现响应式页面开发。

同样，重置浏览器大小时，会重新渲染页面。

这里做一个简单的总结，如下为参考链接：http://www.runoob.com/cssref/css3-pr-mediaquery.html

两种使用方式：

第一种：style中设置

@media mediatype（媒体类型） and|not|only (media feature) {
    CSS-Code;    //CSS代码块
}

媒体类型主要包括：

all 所有类型设备

screen 用于电脑、平板、手机屏幕

speech  用于阅读器发生设备

print 用于打印预览

示例：以屏幕宽度1366px区分

@media screen and (max-width:1365px){
   /* 当屏幕宽度小于1366px时，适配的CSS代码块*/
}
@media screen and (min-width:1366px){
   /* 当屏幕宽度大于等于1366px时，适配的CSS代码块*/
}

and/not/only的用法解析：

not：排除某些特定设备

only：指定特定的媒体类型 

          移动设备支持Media Queries的，会读取only的样式文件；

          不支持的遇到only就会忽略这个样式文件。

分辨率由小向大写，因为CSS是从前向后加载，符合条件的情况下，后面的样式文件会覆盖掉前面的样式文件。

@media (max-width: 767px) {
   // col-xs
}

@media (min-width: 768px) and (max-width: 991px) {
   // col-sm
}

@media (min-width: 992px) and (max-width: 1199px) {
   // col-md
}

@media (min-width: 1200px) {
   // col-lg
}

第二种：在引用时设置断点

根据不同的条件，引用不同的样式文件，使之生效。

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">