android 响应式布局,css3 MediaQueries实现响应式布局

CSS3中的MediaQueries对于多设备适配网站的设计挺重要的(当然是对我这种小白来说)。

这个css3的属性非常方便，根据显示窗口的大小，使用不同的css样式来展示相同的内容。现在看一下它的用法(比较常用版)。

1.简单示例

首先来看一个简单的实例：

上面的media语句表示的是：

1、screen：指的是一种媒体类型，有多种类型比如speech屏幕阅读器等发声设备等(有很多种媒介)，但是最最常用的是screen，其他的可以忽略。

2、and：被称为关键词，与其相似的还有not,only，就是条件之间的逻辑词；

3、(max-width:600px)：这个就是媒体特性，说得通俗一点就是媒体条件(显示的条件)，当页页宽度小于或等于600px,调用small.css样式。

2.引入方法

现在具体一点看使用方法,只看引用方法、关键词和媒体条件：

1、link方法引入

2、xml方式引入

3、@import方式引入

@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在

中的中引入，单这种使用方法在ie6-7都不被支持 如

样式文件中调用另一个样式文件：

@import url("css/reset.css") screen;

@import url("css/print.css") print;

在

中的中调用：

@import url("css/style.css") all;

4、@media引入

这种引入方式和@import是一样的，也有两种方式：

样式文件中使用：

@media screen{

选择器{

属性：属性值；

}

}

在

>/head>中的中调用：

@media screen{

选择器{

属性：属性值；

}

}

3.媒体特性(Media Query，就是调用css的条件)

常用的条件有：

属性

值

Min/Max

描述

width

length

yes

渲染界面的宽度

height

length

yes

渲染界面的高度

device-width

length

yes

设备的屏幕宽度

device-height

length

yes

设备的屏幕高度

oritentation

Portrait/landscape

no

设备显示长宽比例

width、height：浏览器的显示窗口大小，当你缩放窗口时会检测到。

device-width、device-height：指设备屏幕的大小，检测的是设备的屏幕大小，与浏览器窗口大小无关。

oritentation(可以有效检测横屏)

portrait：

指定输出设备中的页面可见区域高度大于或等于宽度

landscape：

除portrait值情况外，都是landscape

Min/Max 指定在一定数值范围内调用css。

Media Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type(浏览器一般为screen 也可以忽略不写Media Type)。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

一些常用的移动设备类型写法

iPhone4

上面的样式是专门针对iPhone4的移动设备写的。

iPad

在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，在纵向(portrait)时采用portrait.css来渲染页面；在横向(landscape)时采用landscape.css来渲染页面。

android

/*240px的宽度*/

/*360px的宽度*/

/*480px的宽度*/

这里是对安卓不同屏幕大小的适配，上面的语句可以当个简单的查询表。