响应式布局的学习1.0---@media 查询

响应式布局的学习1.0

响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

1.viewport
viewport 是用户网页的可视区域。
首先只要你是响应式布局，你就先把这句话加上去。

//width=device-width ： 网页宽度等于设备宽度
//initial-scale=1.0 ： 初始缩放比例为1.0 。网页初始页面的大小占整个面积的100%
//maximum-scale=1.0 ： 最大缩放比例为1.0 ，
//user-scalable ： 用户是否可以手动缩放

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

2.媒体查询（移动优先）
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

//直接在style标签内部

<style>
body{
    //设置背景颜色为紫色
    background-color:#C9F;
    }
    //当设备最大宽度为960px时背景颜色变为白色
    //注意这之间的空格不可少
    //我开始写的时候就遇到我写完了，然后咋回事怎么不变色呀，感觉没错呀....em..然后发现是因为960之前少了一个空格
    @media screen and (max-width: 960px){
        body{
            background-color:#FFF;
        }
    }
    //注意先写大范围后写小范围。----》960写在500前面（大范围会覆盖小范围）
    @media screen and (max-width: 500px){
        body{
            background-color:#000;
        }
    }
</style>