媒体查询之一物理像素的设置

响应式布局

媒体查询

• 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式，使页面在不同在终端设备下达到不同的渲染效果；
• @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的；
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；

• 媒体查询的语法：

  @media 媒体类型 and （媒体特性）{包含正常的css样式内容}；
  @media only 媒体类型 and （媒体特性）{}

  • 示例：

    @media only tv{
        #test{
                background: yellow;
            }
        }

  • 使用媒体查询必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）；

  • 媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔；
  • 但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。

• 媒体类型

  • all，用于所有设备
  • print，用于打印机和打印预览
  • screen，用于电脑屏幕，平板电脑，智能手机等。
  • speech，应用于屏幕阅读器等发声设备

• 媒体特性

  • width：当前的宽度等于某个值时，样式生效；
  • min-width：最小宽度，指的是媒体类型大于或等于指定宽度时，样式生效；
  • max-width：最大宽度，是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。
    

    //意思：当屏幕宽度小于200px时，执行代码块中的逻辑；
    @media only screen and (max-width:200px ){<