用 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; } }
<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; } }
@media screen and (min-width:600px) and (max-width:900px) { .demo { background-color: red; } }
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的前缀
没有评论:
发表评论