H5C3：媒体查询和本地存储

---

一、媒体查询

1.1 语法和注意点

使用语法
@media not/only 媒介类型 and (选取条件) {}

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等
speech	应用于屏幕阅读器等发生设备

注意点 : orientation:文档的方向，有三个值 1:auto根据设备的倾斜摆动情况来决定文档显示的方向 2:portait锁定为纵向 3:landscape锁定为横向
补充点 :

1. 可以使用not，and和only等逻辑操作符构建复杂的媒体查询。
2. and操作符用来把多个媒体属性组合成一条媒体查询。只有当每个属性都为真时，结果才为真
3. not操作符来对每一条媒体查询的结果进行取反。only操作符表示尽在媒体查询匹配成功的情况下应用样式。可以通过它让选中的样式在老式浏览器中不被应用。若使用not或only操作符，必须明确指定一个媒体类型。
4. 你也可以将多个媒体查询以逗号分隔放在一起；只要其中一个为真，整个媒体查询语句就返回真。相当于or操作符

1.2 移动端新尺寸

1. em
   相对于父元素的字体大小
2. rem
   相对于html根元素的大小

二、本地存储

2.1 sessionStorage()

临时的本地存储,当页面刷新时就会销毁

2.2 localStorage()

本地存储,除非手动删除,否则会一直存在

2.3 方法

1. setItem(“key”,“value”); 写入数据
2. getItem(“key”): 读取数据
3. removeItem(“key”); 根据key值删除数据
4. clear(); 删除全部的数据

2.4 存储事件的监听

无论什么时候存储在LocalStorage或sessionStorage的数据发生改变，就会触发onstorage事件
注意点

1. 当前页面不触发
2. 另外的监听页面触发

与存储事件想过的事件对象

1. key：修改或删除的key值，如果调用clear()时，该属性值为null
2. newValue：新设置的值，如果调用removeItem()时，该属性为null
3. oldValue：调用改变前的value值；添加新项时，该属性值为null
4. storageArea：当前的storage对象
5. url：触发该存储变化脚本所在的文档的URL（就是说哪个页面修改的数据）