移动web开发笔记（2）

1、媒体查询

（1）使用link标签的media属性为样式表指定设备类型

如<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:960px)" href="style.css"/>

当设备屏幕的宽度大于960px才会加载style.css样式文件

（2）使用meta标签创建媒体查询

如<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no ,target-densitydpi = high-dpi">

关于dpi可以查看我的上一篇博客

手机屏幕尺寸及dpi密度分布图

可见高分屏和超分屏已经是主流了

中分辨率屏幕：

@media(-webkit-min-device-pixel-ratio:1){css代码}

高分辨率屏幕：

@media(-webkit-min-device-pixel-ratio:1.5){css代码}

超高分辨率屏幕（Retina屏）

@media(-webkit-min-device-pixel-ratio:2){css代码}

media的一些属性：

- width 视口宽度
- height 视口高度
- device-width 设备屏幕的宽度
- device-height 设备屏幕的高度
- orientation 检测屏幕处于横屏还是竖屏
- aspect-ratio 基于视口的宽高比例
- device-aspect-ratio 基于设备屏幕的宽高比
- color 颜色的位数，如min-color：32 匹配设备是否有32位或以上的颜色
- color-index 设备的颜色索引表中的颜色数
- monochrome 检测单色振缓冲区中每像素使用的位数。为非负数，如monochrome：3
- resolution 检测屏幕或打印机的分辨率，如min-resolution：300dpi(dpi后面会介绍)，也可以是每厘米像素点的度量值，如min-resolution：120dpcm
- scan 扫描方式，值为progressive（逐行扫描）、interlace（隔行扫描）
- grid 检测输出设备是网格设备还是位图设备