CSS相应式布局之媒体查询-百分百源码网

CSS相应式布局之媒体查询

发布时间：09/01 来源：未知浏览：关键词：

在实际项目中，总会碰到响应式规划的问题，假如不曾使用一些响应式UI框架的话，那么一样就会用媒体查询来实现响应式规划，由于碰到的实在太频繁了，所以我觉得还是有必要轻微停止一下总结的。

第一我们需要理解到的一点是，使用媒体查询这种方式，当重置阅读器大小的历程中，页面就会按照阅读器的宽度和高度从新渲染页面。

一、关于meta

在使用媒体查询此前，需要先使用<meta> 设定，来兼容移动设备的展现结果，所以第一先简便理解一下关于html中的<metal>标签。

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

<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类型。

值	描写
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

所有阅读器都支撑值为 “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) { }