本文共 2687 字，大约阅读时间需要 8 分钟。
目录
HTML5新增的API的使用
window.navigator.onLine检查网络状态（false为未连接，true为已连接）
检测网络连接的事件（浏览器的兼容性问题）
A、'online'：网络连接
B、'offline'：网络断开全屏显示：控制浏览器的全屏显示
（具有浏览器的兼容问题）
A、webkitRequestFullScreen()方法：谷歌浏览器实现全屏显示
B、webkitCancelFullScreen()方法：谷歌浏览器关闭全屏显示 C、webkitIsFullScreen()方法：判断谷歌浏览器是否全屏。 火狐浏览器前面带moz 例如：mozRequestFullScreen()方法 IE浏览器前面带ms 例如：msRequestFullScreen()方法文件读取
1、FileReader对象：读取本地文件（文件名、路径）
2、File对象：读取文件的内容 3、DataTransfer对象：拖放文件的对象 浏览器不允许JavaScript直接访问文件系统，使用input表单元素的文件域<input type="file">实现文件的上传。强调1：<input type="file" multiple> multiple表示选择文件时可以选择多个文件。
<input type="file" multiple> ：会返回一个FileList对象给对象保存在files属性中，可以通过索引的方式访问该对象中的所有元素。FileList对象（文件列表）里面存放的是File对象（文件对象）每个File对象中有三个常用属性：
name :文件名 size ：文件的大小（以字节为单位） type ：文件的类型
强调2：onchange事件：当用户选择文件发生改变时触发该事件。
4、FileReader的使用方法：
a、创建FileReader对象：new FileReader() b、使用该对象的相关方法来读取文件 readAsBinaryString(file)：将文件读取为二进制编码 readAsText(file，[encoding])：将文件读取为文本格式 readAsDataURL()：将文件读取为DataURL方式（通常用来读取图片的缩略图) abort()：中断读取操作 c、访问该对象的result属性得到读取结果 d、文件读取的常用事件： onload：读取成功时触发 onloadnd：文件读取完成时触发（无论文件读取是否成功都触发） onerror：文件读取错误时触发 onabort：文件读取中断时触发实例：
地理定位
Geolocation接口
使用浏览器内置对象：navigator.geolocation
a、getCurrentPosition()方法：调用该方法时会发起一个异步请求，浏览器调用底层硬件来获取当前的位置信息。移动端Web页面的布局方式
流式布局
通常用百分比方式，也称为百分比自适应式布局。
目标元素宽度/父盒子宽度 = 流式布局中内容所占百分比
弹性盒子布局
1、display：
inline：内联元素，前后都没有换行符 flex：弹性盒子 none：元素不会被显示2、flex-flow：盒子的方向，是flex-direction和flex-wrap两个属性的组合
flex-direction：（取值为以下四种） row：默认值，即横轴为主轴方向，纵轴为侧轴 row-reverse：弹性盒子按照横轴的逆序排列 column：纵轴为主轴，横轴为侧轴 column-reverse：按照纵轴逆序排序 flex-wrap：用于让弹性盒子在必要的时候拆行。（取值为以下几种） nowrap：容器为单行，该情况下flex可能会溢出容器，默认属性值，不换行 wrap：容器为多行，flex子项溢出的部分会被放置到新行（换行）第一行显示在上方 wrap-reverse：反转wrap的排列，第一行显示在下方3、justify-content：设置元素在主轴方向的排列方式
flex-start：弹性盒子元素将向行起始位置对齐（默认值） flex-end：弹性盒子元素将向行结束位置对齐 center：弹性盒子元素将向行中间位置对齐 space-between：弹性盒子元素会平均分布在行里，第一个元素边界与行起始位置边界对齐，最后一个元素边界与行结束位置的边界对齐 space-around：弹性盒子元素会平均分布在行里，两端保留子元素与子元素之间间距大小的一半4、align-items：设置子元素在侧轴上的对齐方式
baseline：若弹性盒子元素的行内轴（页面中文字的排列方向）与侧轴方向一致，则该值与flex-start等效。其他情况下，该值将与基线对齐stretch：默认值。如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制
5、order：设置子元素的排列顺序（用在子元素上）
6、flex-grow：设置子元素的长度（用在子元素上）
实例：
ABC
Rem适配布局
根据不同的设备情况按比例设置页面字体的大小
1、是css3 中的相对长度单位 2、当使用rem单位时，根节点<html>的字体大小(font-size)决定 rem的尺寸 强调：rem和em的区别： a、rem是相对于<html>根节点的字体大小 b、em是相对于父元素的字体的大小 px像素是一个绝对单位举例：
测试文本
媒体查询
又称为媒介查询。是一种自动适配，是根据屏幕比例、窗口宽度、设备的方向等差异来改变页面的显示方式。媒体查询由媒体类型和条件表达式组成。
1、媒体查询的使用方式：
A、内联式：直接在css中使用 <style> @media screen and (min-width:640px){ css属性：css属性 } </style>B、外联式：作为独立的css文件从外部引入
<link href="style.css media="screen and2、响应式布局容器：需要一个父级元素作为容器，来配合子元素实现显示的变化。
转载地址：http://gshai.baihongyu.com/