CSS响应式布局之媒体查询

在实际项目中，总会遇到响应式布局的问题，如果未曾使用一些响应式UI框架的话，那么一般就会用媒体查询来实现响应式布局，由于遇到的实在太频繁了，所以我觉得还是有必要稍微进行一下总结的。

首先我们需要了解到的一点是，使用媒体查询这种方式，当重置浏览器大小的过程中，页面就会根据浏览器的宽度和高度重新渲染页面。

一、关于meta

在使用媒体查询之前，需要先使用<meta> 设置，来兼容移动设备的展示效果，所以首先先简单了解一下关于html中的<metal>标签。

<meta>这个标签一般放在head标签里面，用于提供有关某个 HTML 元素的元信息 (meta-information)，比如描述、针对搜索引擎的关键词以及刷新频率。

针对媒体查询时设置如下：

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

参数说明：

1、name 属性提供了名称/值对中的名称。name="viewport"表示是对视窗的设置，除了viewport还有。

2、content 属性提供了名称/值对中的值，该值可以是任何有效的字符串，且content基于内容，始终要和 http-equiv 或 name 属性一起使用，为他们提供了与其相关的值的定义。content的值说明：

width = device-width：宽度等于当前设备的宽度；

initial-scale：初始的缩放比例（默认设置为1.0）；

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）；

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）；

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）。

更多关于<meta>的深入理解，可以参考：http://www.w3school.com.cn/tags/tag_meta.asp

二、媒体查询实现方式

1、直接在link中判读设备的尺寸，然后引用不同的外部css文件。例如：

<link type="text/css" href="media_1.css" media="screen and (min-width: px)">

当屏幕大于400px的时候就引用media_1.css这个外部的css样式文件。

2、在设置css样式的时候，直接在后面跟着设置@media。例如：

.div1{
    width: 400px;
    height: 400px;
}
/*当屏幕大于1440px的彩色屏幕样式*/
@media screen and (min-width: 1440px){
    .div1{
        width: 800px;
        height:800px;
    }
}

这是使用CSS3实现的媒体查询，其实媒体查询实质上就是一种样式的覆盖。

三、CSS3 媒体查询

1、基本语法

@media  媒体类型  关键字 and (媒体功能) {
        /* CSS 样式 */
    }

2、关键字

only：指定某种指定的媒体类型，可以用来排除不支持媒体查询的浏览器。

not：排除某种指定的媒体类型。

关键字的使用很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备

3、媒体类型

媒体类型描述设备的一般类别，除非使用not或only关键字，否则媒体类型是可选的，并且将隐含使用all类型。

所有浏览器都支持值为 “screen”、”print” 以及 “all” 的 media 属性。

4、常用媒体功能

以下仅仅列举了一些可能稍微常用的媒体功能：

height 定义输出设备中的页面可见区域高度。

width 定义输出设备中的页面可见区域宽度。

max-height 定义输出设备中的页面最大可见区域高度。

max-width 定义输出设备中的页面最大可见区域宽度。

min-height 定义输出设备中的页面最小可见区域高度。

min-width 定义输出设备中的页面最小可见区域宽度。

device-height 定义输出设备的屏幕可见高度。

device-width 定义输出设备的屏幕可见宽度。

max-device-height 定义输出设备的屏幕可见的最大高度。

max-device-width 定义输出设备的屏幕最大可见宽度。

orientation 检测设备目前处于横向还是纵向状态。

四、针对实际比较常见的尺寸设置

以下仅仅列举了部分常见的屏幕尺寸，但是也实现大于、小于、等于的设置。

    /* 屏幕尺寸大于960px时（普通彩色屏幕） */
    @media only screen and (min-width:960px){ }
    /* 屏幕尺寸小于1440px时 */
    @media only screen and (max-width:1440px){ }
    /* 屏幕尺寸大于960px而小于1920px */
    @media only screen  (min-width: 960px) and (max-width: 1920px){ }
    /* 屏幕大于2000px时（MAC) */
    @media only screen and (min-width:2000px){ }
    /*  当设备可视宽度小于480px (iphone)*/
    @media only screen and (max-device-width:480px){ }
    /* 当设备可视宽度等于768px时 (iPad) */
    @media only screen and (device-width:768px){ }
    /* 屏幕尺寸大于481px而小于1024px (iPad 竖屏) */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { }
    /* 屏幕尺寸大于481px而小于1024px (iPad横屏) */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { }

注意：由于css的样式覆盖问题，所以在实际设置的时候，如果同一个元素需要设置几个不同尺寸的问题，就需要注意一下顺序问题，比如：min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面。

推荐教程：《CSS教程》

以上就是CSS响应式布局之媒体查询的详细内容，更多请关注Gxlcms其它相关文章！