H5CSS3:媒体查询和本地存储
一、媒体查询
1.1 语法和注意点
使用语法
@media not/only 媒介类型 and (选取条件) {}
值 | 描述 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等 |
speech | 应用于屏幕阅读器等发生设备 |
注意点 : orientation:文档的方向,有三个值 1:auto根据设备的倾斜摆动情况来决定文档显示的方向 2:portait锁定为纵向 3:landscape锁定为横向
补充点 :
- 可以使用not,and和only等逻辑操作符构建复杂的媒体查询。
- and操作符用来把多个媒体属性组合成一条媒体查询。只有当每个属性都为真时,结果才为真
- not操作符来对每一条媒体查询的结果进行取反。only操作符表示尽在媒体查询匹配成功的情况下应用样式。可以通过它让选中的样式在老式浏览器中不被应用。若使用not或only操作符,必须明确指定一个媒体类型。
- 你也可以将多个媒体查询以逗号分隔放在一起;只要其中一个为真,整个媒体查询语句就返回真。相当于or操作符
1.2 移动端新尺寸
- em
相对于父元素的字体大小- rem
相对于html根元素的大小
二、本地存储
2.1 sessionStorage()
临时的本地存储,当页面刷新时就会销毁
2.2 localStorage()
本地存储,除非手动删除,否则会一直存在
2.3 方法
- setItem(“key”,“value”); 写入数据
- getItem(“key”): 读取数据
- removeItem(“key”); 根据key值删除数据
- clear(); 删除全部的数据
2.4 存储事件的监听
无论什么时候存储在LocalStorage或sessionStorage的数据发生改变,就会触发onstorage事件
注意点
- 当前页面不触发
- 另外的监听页面触发
与存储事件想过的事件对象
- key:修改或删除的key值,如果调用clear()时,该属性值为null
- newValue:新设置的值,如果调用removeItem()时,该属性为null
- oldValue:调用改变前的value值;添加新项时,该属性值为null
- storageArea:当前的storage对象
- url:触发该存储变化脚本所在的文档的URL(就是说哪个页面修改的数据)