2016年5月31日星期二

用 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的前缀

没有评论:

发表评论