HTML5新增API的使用及移动端页面布局方式

HTML5新增API的使用及移动端页面布局方式

---

一、HTML5新增API的使用

1.检测网络连接状态的事件

（注意浏览器兼容性问题）
online（网络连接）
offline（网络断开）

2.控制页面元素的全屏显示

 requestFullScreen（）打开全屏显示
要带浏览器版本的前缀，chrome用webkitRequestFullScreen
cancelFullScreen（）关闭全屏显示
 要带浏览器版本的前缀，chrome用webkitCancelFullScreen

3.文件读取

强调：multiple表示可以选择多个文件

<input type="file" multiple>会返回一个FileList对象，保存在files属性中，可通过索引的方式访问该对象中所有元素，FileList（文件列表）中存放的是File对象（文件对象）

​每个File对象中有三个常用属性：name（文件名），size（以字节为单位的文件大小），type（文件的类型）

onchange事件：当用户选择文件发生改变时触发

FileReader：读取本地文件
	创建FileReader对象： new FileReader（）
	使用该对象的相关方法来读取文件
		readAsBinaryString（file）：将文件读取为二进制编码
		readAsText（file，[encoding]）：将文件读取为文本
		readAsDataURL（file）：将文件读取为DataURL方式
		abort（）；中断读取操作
	访问该对象的result属性得到读取结果
	文件读取常用事件
		onload：读取成功时触发
		onloadend：文件读取完成时触发（无论是否读取成功）
		​onerror:读取错误时触发
		onabort：读取中断时触发

File对象：读取文件的内容或数据

DataTransfer对象：拖放文件的对象

4.地理定位：

geolocation接口
使用浏览器内置对象：navigator.geolocation

二、移动端页面布局方式

1.流式布局：

2.弹性盒子布局

display：

inline:内联样式
flex：弹性盒子
none：元素不显示

flex-flow：盒子的方向：
是flex-direction和flex-wrap这两个属性的组合

flex-direction：默认值row：横轴为主轴，纵轴为侧轴
row-reverse：按横轴逆序排列
column：纵轴为主轴，横轴为侧轴
column-reverse：按纵轴逆序排列

flex-wrap：

默认值nowrap：
容器为单行，flex子项可能会溢出

wrap：容器为多行，flex子项溢出的部分会被放置到新行

wrap-reverse：反转wrap的排列，第一行显示在下方

justify-content设置子元素在主轴方向上的排列方式

flex-start：默认，弹性盒子元素向行起始位置对其
flex-end：弹性盒子元素向行结束位置对其
center：弹性盒子元素向行中间位置对齐
space-between：均匀分布在行里，
space-around：均匀分布在行里，两端保留子元素与子元素之间间距大小的一半

align-items：设置子元素在侧轴上的对齐方式

baseline：如果弹性盒子元素的行内轴（页面中文字的排列方向）与侧轴方向一致，则该值与flex-start等效。其他情况下，该值将与基线对齐
stretch：默认值。如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制

order：设置子元素的排列顺序（用在子元素上）
flex-grow：设置子元素长度（用在子元素上）

3、rem适配布局：

根据不同的设备情况按比例设置页面的字体大小
当使用rem单位时，根节点的字体大小决定了rem的尺寸
强调：rem和em的区别

rem是相对于html根节点的字体大小
em是相对于父元素的字体大小,是css3中的相对长度单位

4、媒体查询：

是根据屏幕的比例、窗口的宽度、显示的内容、设备方向等差异来改变页面的显示方式

使用方式：
内联式：直接在css中使用

<style>@media screen and (minwidth:640px){
                 css属性: css属性
		}
</style>

外联式：作为独立的css文件从外部引入

<link href="style.css" media="screen and (min-width:640px)" ref="stylesheet">

5、响应式布局容器

需要一个父级元素作为容器，来配合子元素实现显示的变化