手机端开发系列之四--媒体查询

Contents

1. 1. 媒体查询
   1. 1.1. 媒体类型
   2. 1.2. 媒体的特性
   3. 1.3. 关键字
   4. 1.4. 引入的方式
   5. 1.5. 常用的特性
   6. 1.6. window.resize

媒体查询

针对不同的手机设备做出不同的CSS样式
code block:

媒体类型

可以通过媒体类型对不同的设备指定不同的样式，一般我们使用screen。

1. all–用于所有的设备。
2. print–用于打印机或打印机预览
3. screen–用于电脑屏幕，平板电脑，只能手机等。

媒体的特性

判断的条件和依据。

1. width–定义输出设备中的页面可见区域的宽度。
2. heigh–定义输出设备中的页面可见区域的高度。
3. min-width–定义输出设备中的页面最小可见区域的宽度。
4. min-height–定义输出设备中的页面最小可见区域的高度。
5. max-width–定义输出设备中的页面最大可见区域的宽度。
6. max-height–定义输出设备中的页面最大可见区域的高度。
7. device-width–定义输出设备屏幕可见的宽度。
8. device-height–定义输出设备屏幕可见的高度。
9. aspect-ratio–定义输出设备中的页面可是区域的宽度和高度的比率。
10. device-aspect-ratio–定义设备中的屏幕可是宽度和高度的比率。

关键字

1.and 可以将多个媒体特性连接到一起，相当于“且”的意思。
2.not 排除某个媒体类型，相当于“非”的意思，可以省略。
3.only指定某个特定的媒体类型，可以省略。

引入的方式

1.link方法：

<link href="./6-1.css" media="only screen and (max-width: 320px)">

2.@media方法（写在CSS里）

@media only screen and (width: 360px) {
    html {
        font-size: 18px;
    }
}

基本上就这句话，符合就执行这句话。

常用的特性

1、width / height 完全等于layout viewport。
2、max-width / max-height 小于等于layout viewport。
3、min-width / min-height 大于等于layout viewport。
4、device-width / device-height 完全等于ideal viewport。
5、orientation: portrait | landscape 肖像/全景模式。
…..还有其它

window.resize

定义和用法

当调整浏览器窗口的大小时，发生 resize 事件。
resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。
当改变了那个浏览的宽度或者是高度的时候。

在做每个手机不同分辨率的时候改变手机的类型很经常用这个