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

Posted 2021-09-27 遥岑.

目录

• HTML新增API的使用
• • 检测网络连接的事件（注意浏览器的兼容性）
  • 控制页面元素的全屏显示(注意浏览器的兼容性)
  • 文件读取
  • • FileReader的使用方法
  • 地理定位：Geolocation接口
• 移动端Web页面的布局方式
• • 流式布局
  • 弹性盒布局
  • • 布局原理
    • flex布局父项常见属性
    • flex布局子项常见属性
  • rem适配布局
  • • rem单位
    • 媒体查询(Media Query)
  • 响应式布局
  • • 响应式开发原理

html新增API的使用

检测网络连接的事件（注意浏览器的兼容性）

• ‘online’：网络已连接
• ‘offline’：网络已断开

控制页面元素的全屏显示(注意浏览器的兼容性)

• webkitRequestFullScreen()方法:谷歌浏览器打开全屏显示
• webkitCancelFullScreen()方法：谷歌浏览器关闭全屏显示
• webkitIsFullScreen()方法：判断谷歌浏览器是否全屏

这两个方法存在兼容性问题，IE9+才会支持，即使高版本浏览器也会有兼容性问题。因此不同的浏览器需要添加不同的私有前缀。

火狐浏览器：

• mozRequestFullScreen()方法：火狐浏览器打开全屏显示
• mozCancelFullScreen()方法：火狐浏览器关闭全屏显示
• mozIsFullScreen()方法：判断谷歌浏览器是否全屏

IE浏览器：

• msRequestFullScreen()方法：IE浏览器打开全屏显示
• msCancelFullScreen()方法：IE浏览器关闭全屏显示
• msIsFullScreen()方法：判断IE浏览器是否全屏

文件读取

FileReader：读取本地文件
File对象：读取文件的内容
DataTransfer对象：拖放文件的对象

<input type="file" multiple>

• multiple属性表示可以选择多个文件
• 会返回一个FileList对象(文件列表)对象保存在files属性中，可以通过索引的方式。访问该对象中所有元素，FileList对象(文件列表)中存放的是File对象(文件对象)，每个File对象中有三个常用属性：name：文件名， size：文件的大小(以字节为单位)，type：文件的类型
• onchange事件：当用户选择文件发生改变时触发

FileReader的使用方法

1. 创建FileReader对象：new FileReader()

2. 使用该对象的相关方法来读取文件
   readAsBinaryString(file)：将文件读取为二进制编码
   readAsText(file,[encoding])：将文件读取为文本
   readAsDataURL(file)：将文件读取为DataURL方式(读取图片的缩略图)
   abort()：中断读取操作

3. 访问该对象的result属性得到读取结果

4. 文件读取的常用事件
   onload：读取成功时触发
   onloadend：文件读取完成时触发(无论读取是否成功)
   onerror：读取错误时触发
   onabort：读取中断时触发

地理定位：Geolocation接口

使用浏览器内置对象navigator.geolocation。
getCurrentPosition()方法：调用该方法时会发起一个异步请求，浏览器调用底层的硬件来获取当前的位置信息。

移动端Web页面的布局方式

在移动端Web开发中，可以通过流式布局、弹性盒布局和Rem适配布局来制作移动端页面。此外，我们还可以将上述三大布局与媒体查询结合起来创建响应式页面，实现一个页面同时兼容PC端和移动端。为了提高开发效率，我们在开发中还会引入Bootstrap框架，利用它来快速构建响应式页面。

流式布局：也称为百分比自适应布局，它是一种等比例缩放的布局方式，也是移动Web开发中比较常见的布局方式。在CSS代码中需要使用百分比来设置盒子的宽高。
弹性盒布局：是CSS3中的一种新布局模式，可以轻松地创建响应式网站布局。该弹性盒布局为盒模块增加了灵活性，可以让人们告别浮动（float），完美的实现垂直居中。目前它得到了几乎所有主流浏览器的支持。
Rem适配方案：一般采取Less+Rem+媒体查询来实现响应式布局设计。

流式布局

流式布局：就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局盒子是移动web开发时使用的比较常见的布局方式。

• 一般会设置max-width（max-height）和min-width（min-height）最大宽度（高度）和最小宽度（高度）保证在一定范围内缩放

弹性盒布局

flex是flexible Box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局之后，子元素的float、clear、vertical-align属性将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局。

布局原理

采用Flex布局的元素，称为Flex容器（flex container），简称容器。他的所有子元素自动成为容器成员，称为Flex项目（flex item），简称项目。
flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

flex布局父项常见属性

display：

• inline：内联元素，前后都没有换行符
• flex：弹性盒子
• none：元素不显示

flex-direction：
该属性决定主轴的方向（即项目的排列方向）。
主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，我们的元素是跟着主轴来排列的。

• row：横轴为主轴，纵轴为侧轴（默认）
• row-reverse：按横轴逆序排列
• column：纵轴为主轴，横轴为侧轴
• column-reverse：按纵轴逆序排列

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

• flex-start：弹性盒子元素将向行起始位置对齐（默认）
• flex-end：弹性盒子元素将向行结束位置对齐
• center：弹性盒子元素将向行中间位置对齐
• space-between：先贴边，再平均分配剩余空间。弹性盒子元素会平均分布在行里，第一个元素的边界与行的起始位置边界对齐，最后一个元素的边界与行结束位置的边界对齐
• space-around：弹性盒子元素会平均分布在行里，两端保留子元素与子元素之间间距大小的一半

flex-wrap：
用于让弹性盒子元素在必要的时候换行。

• nowrap：容器为单行，该值是默认属性值，不换行，如果装不开，会缩小子元素的宽度，放到父元素里面
• wrap：容器为多行，flex子项溢出的部分会被放置到新行（换行），第一行显示在上方
• wrap-reverse：反转wrap的排列，第一行显示在下方

align-items ：
设置子元素在侧轴上的对齐方式，适用于单行情况下。

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

align-content:
设置侧轴上的子元素的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

• flex-start：弹性盒子元素将向行起始位置对齐（默认）
• flex-end：弹性盒子元素将向行结束位置对齐
• center：弹性盒子元素将向行中间位置对齐
• space-between：先贴边，再平均分配剩余空间。弹性盒子元素会平均分布在行里，第一个元素的边界与行的起始位置边界对齐，最后一个元素的边界与行结束位置的边界对齐
• space-around：弹性盒子元素会平均分布在行里，两端保留子元素与子元素之间间距大小的一半
• stretch：设置子项元素高度平分父元素高度

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

• flex-flow:row wrap

flex布局子项常见属性

flex:
定义子项目分配剩余空间，用flex表示占多少份数。

• flex:number

flex-grow：
设置子元素的长度（用在子元素上）。

order：
设置子元素的排列顺序（用在子元素上），数值越小越靠前，默认为0。

align-self:
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

• auto:继承父元素的align-items属性，如果没有父元素，则等同于stretch
• flex-start：弹性盒子元素将向行起始位置对齐（默认）
• flex-end：弹性盒子元素将向行结束位置对齐
• center：弹性盒子元素将向行中间位置对齐

rem适配布局

根据不同的设备情况按比例设置页面字体的大小。

rem单位

rem（root em）是一个相对单位，类似于em ，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。

媒体查询(Media Query)

媒体查询：又称为媒介查询，是根据屏幕的比例、窗口的宽度、设备的方向等差异来改变页面的显示方式。
媒体查询是css3新语法。
使用@media查询，可以针对不同的媒体类型定义不同的样式，可以针对不同的屏幕尺寸设置不同的样式。

内联式：直接在css中使用

@media mediatype and|not|only (media feature) {
     css-code;
}

• @media开头
• mediatype媒体类型
• 关键字and not only
• media feature媒体特性（必须有小括号）

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

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

响应式布局

响应式开发原理

原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
响应式布局容器：需要一个父级元素作为容器，来配合子元素实现显示的变化。

常用的响应式尺寸划分（也可以根据实际情况划分）：

• 超小屏幕（手机，小于768px）：设置宽度为100%
• 小屏幕（平板，大于等于768px）：设置宽度为750px
• 中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px
• 大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px