dianCms手机版本 预计几时正式提供下载？

急。

马上普及4G了，以后大家都用手机上网了。

希望抓紧推出手机版本。

不错　　支持

今天在实际开发中，用到了@media这个属性，移动手机版网页中，这个功能非常实用，他能自己识别设备屏幕的大小来条件页面的加载样式：

首先看看这篇文章：CSS3 Conditional 简介

下面只介绍@media的常用特性：

1.

和

@import url(color.css) screen and (min-width:500px);

表示在浏览器大小最小宽度是500px时加载example.css特性；

2. 查询浏览器屏幕

@media screen and (min-width: 480px) and (max-height: 800px) {

/*css样式规则*/

}和

@media screen and (width: 480px) and (height: 800px) {

/*css样式规则*/

}

第二个表示当屏幕为width: 480px和height: 800px时使用括号内样式规则；

3. 查询设备

@media screen and (device-width: 480px) and (device-height: 800px) {

/*css样式规则*/

}

表示设备的的屏幕大小为device-width: 480px和device-height: 800px时使用括号内样式规则；

4. 屏幕方向

@media (orientation:portrait) { … }

@media (orientation:landscape) { … }

拿ipad举例：

/* iPads (landscape) ----------- */

@media only screen

   and (min-device-width : 768px)

   and (max-device-width : 1024px)

   and (orientation : landscape) {

   /* Styles */

}

/* iPads (portrait) ----------- */

@media only screen

   and (min-device-width : 768px)

   and (max-device-width : 1024px)

   and (orientation : portrait) {

   /* Styles */

}

5. width和height的比例查询

aspect-ratio，"width" 和 "height"比例；device-aspect-ratio，"device-width" 和 "device-height" 的比例

@media screen and (device-aspect-ratio: 16/9) { … }

@media screen and (device-aspect-ratio: 480/800) { … }

6. resolution，分辨率

@media screen and (min-resolution: 300dpi) { … }

7. 实用技巧：

"@media" 还允许嵌套

@media screen {

  #test1 { border: 1px solid blue; }

  @media (max-width: 480px) {

    #test1 {background-color: green;}

  }

}