响应式布局——css

响应式布局

• 网页可以根据不通的设备或窗口大小呈现出不同的效果
• 使用响应式布局，可以使一个网页适用于所有设备
• 响应布局的关键就是媒体查询: 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式
  eg：
  全屏：
  
  缩小窗口
  

媒体查询的使用

语法: @media 查询规则

媒体类型

• all所有设备
• print打印设备
• screen带屏幕的设备
• speech屏幕阅读器

eg：

        @media screen{
            body{
                background-color: coral;
            }
        }

可以使用，连接多个媒体类型，这样它们之间就是一个或的关系。
可以在媒体类型前添加一个only,表示只有；only的使用主要是为了兼容一些老版本浏览器。
一般情况下我们只会用到 screen。

媒体特性

媒体特性一般都是对screen而言的，所以不知名的情况下默认是screen。

媒体特性:

• width视口的宽度
• height视口的高度
• min-width视口的最小宽度（视口大于指定宽度时生效)
• max-width视口的最大宽度（视口小于指定宽度时生效)
  eg：
  窗口<=500px时有背景颜色

       /* 媒体特性 */
        @media (max-width:500px){
            body{
                background-color: coral;
            }
        }

小于500px时变色。

媒体特性之间的连接符：

我们可以设置一个或多个媒体特性，多个媒体特性之间需要连接符进行连接。
连接符：

• and：表示与关系(使用and的时候注意前后都要添加空格)
• ，：表示或关系
• not ：表示非关系，可以对单个媒体特性使用
  eg：

        @media (min-width:500px) and (max-width:800px){
            body{
                background-color: coral;
            }
        }

上面的语句写全之后是这样的

   @media only screen and (min-width:500px) and (max-width:800px){
            body{
                background-color: coral;
            }
        }

就是说默认省略了screen

样式切换的分界点

样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化一般比较常用的断点

• 小于768超小屏幕 max-width=768px
• 大于768小屏幕 min-width=768px
• 大于992中型屏幕 min-width=992px
• 大于1200大屏幕 min-width=1200px