CSS3: Media媒体查询

常见页面布局:

静态布局: 比如58同城，古老的网页

流式布局: 页面大小发生变化，内容不变，但是dom元素也更着变化

自适应布局

响应式布局: 如苹果官网苹果官网

媒体查询包括: 媒体类型和媒体特性。

媒体查询的使用:

link元素中的css媒体查询: 没有执行也引入了css文件(不推荐是使用该方法，link标签会太多，建议写再style样式或者同一的css文件中。)

        <link rel="stylesheet" href="demo.css" media="screen and (max-width: 800px)">
      

样式表中的css媒体查询: 彩色屏幕最大像素不大于600像素的时候时候执行。

        @media screen and (max-width: 600px) { /* 满足条件返回true执行 */
    .demo{
        background: pink;
        color: deeppink;
    }
}