用 Media Queries 设计移动网页端

今天来通过Media Queries样式模块，可以实现根据移动设备的屏幕大小，定制网站页面的不同布局效果。它的优点是开发者只需要实现一套页面，就能够在所有平台的浏览器下访问网站的不同效果。


用 viewport 设置适应移动设备屏幕大小

1．什么是 viewport

Apple 为了解决移动版 Safari 的屏幕分辨率大小问题，专门定义了 viewport 虚拟窗口。它的主要作用是允许开发者创建一个虚拟的窗口（viewport），并自定义其窗口的大小或缩放功能。

如果开发者没有定义这个虚拟窗口，移动版 Safari 的虚拟窗口默认大小为 980 像素。现在，除了Safari浏览器外，其他浏览器也支持 viewport 虚拟窗口。但是，不同的浏览器对viewport窗口的默认大小支持都不一致。默认值分别如下：

— Android Browser 浏览器的默认值是 800 像素；

— IE 浏览器的默认值是 974 像素；

— Opera 浏览器的默认值是 850 像素。

2．如何使用 viewport

viewport虚拟窗口是在meta元素中定义的，其主要作用是设置Web页面适应移动设备的屏幕大小。

如以下代码：

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />

 

该代码的主要作用是自定义虚拟窗口，并指定虚拟窗口width宽度为device-width，初始缩放比例大小为1倍，同时不允许用户使用手动缩放功能。

在上面的代码中，我们使用了一个特别的名字：device-width。自iPhone面世以来，其屏幕的分辨率一致维持在 320´480。由于 Apple 在加入 viewport 时，基本上使用 width=device-width 的表达方式来表示 iPhone 屏幕的实际分辨率大小的宽度，比如 width=320。因此，其他浏览器厂商在实现其 viewport 的时候，也兼容了 device-width 这样的特性。

代码中的 content 属性内共定义三种参数。实际上 content 属性允许设置6种不同的参数，分别如下：


— width 指定虚拟窗口的屏幕宽度大小。

— height 指定虚拟窗口的屏幕高度大小。

— initial-scale 指定初始缩放比例。

— maximum-scale 指定允许用户缩放的最大比例。

— minimum-scale 指定允许用户缩放的最小比例。

— user-scalable 指定是否允许手动缩放。

 

 

Media Queries如何工作

 

1、定义当前屏幕可视区域的宽度最大值是600像素

<link href="small.css" rel="stylesheet" media="screen and(max-width:600px)"/>

 
那么 small.css 怎样写的呢

@media screen and (max-width:600px) { .demo { background-color:red; } }

 
2、定义当前屏幕可视区域的宽度长度在600到900像素之间

<link href="small.css" rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)"/>

@media screen and (min-width:600px) and (max-width:900px) { .demo { background-color: red; } }

 
3、当移动屏幕处于纵向（portrait）模式下时，应用portrait样式文件，当移动设备处于横向（landscape）模式下，应用landscape样式文件

<link href="protrait.css" rel="stylesheet" media="all and(orientation:portrait)"/> 
<link href="landscape.css" rel="stylesheet" media="all and(orientation:landscape)"/>

 

Media Queries语法总结

语法格式如下图所示：

 

1、使用 Media Queries 样式模块时都必须以“@media”方式开头

2、media_query 表示查询关键定，比如说 not only and 等等

• not 表示对后面的样式表达式执行取反操作 
• only 让不支持 Media Queries 的设备但能读取 Media Type 类型的浏览器忽略这个样式，对于支持Media Queries 的移动设备来说，如果存在 only 关键字，移动设备的浏览器会忽略only关键字并直接根据页面的表达式应用样式 文件 

3、media_type 指定设备类型（也称媒体类型）

4、media_feature 定义 css 中的设备特征　　

 

media_type设备类型一览表

 

 

 

 

media_feature设备特征一览表

大部分设备特征都允许接受min/max的前缀

 

 

 原文链接：http://woqilin.blogspot.com/2016/05/media-queries.html