HTML5新增API，移动端Web布局

最新推荐文章于 2023-08-19 11:40:29 发布

别Null.了

最新推荐文章于 2023-08-19 11:40:29 发布

阅读量238

点赞数 3

分类专栏： web学习文章标签： bootstrap html5

本文链接：https://blog.csdn.net/TangJing_/article/details/118367185

版权

web学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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：文件读取中断时触发

实例：

<body>
    <input type="file" multiple>
    <div></div>

    <script>  //DOM的方法读取文档内容
        var file = document.querySelector('input')
        var div = document.querySelector('div')
        
        
        file.onchange = function(){  //当文件选择'file'控件发生变化时触发
            console.log(file.files)  //files属性存放的是一个FileList对象（用户选取的文件列表对象
            //返回的内容含有索引，返回的为文件列表
            for(var i=0;i<file.files.length;i++){  //遍历所有文件的名字
                 console.log(file.files[i].name)
            }

            //1.创建FileReader对象
            var reader = new FileReader()
            //2.读取文件为文本格式
            reader.readAsText(this.files[0])  //读取第一个文件的内容为文本格式
            //3.注册onload事件，将文件的内容放入div中
            reader.onload = function(){
                div.innerHTML = this.result  //this代表的是reader,this是一个DOM对象
            }
        }
    </script>
</body>
</html>

地理定位

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：设置子元素的长度（用在子元素上）

实例：

<style>
    .box{
        display: flex;   /*弹性盒子元素，表明他是一个盒子的容器*/
        border: 1px solid #999;
        height: 60px;   /*盒子的高度*/
        /* flex-flow: column-reverse;  使得盒子按照纵轴逆序排列 */
        justify-content: space-between;  /*弹性盒子内部元素平均分布*/
        padding: 4px;   /*盒子的内填充距离*/
        background: #ddd;
    }
    .box>div{  /*box的所有div后代选择器*/
        margin: 2px;
        padding: 2px;
        border: 1px solid #999;
        background: #fff;
    }
    .a{
        order: 2;
        flex-grow: 1;
    }
    .b{
        order: 3;
        flex-grow: 1;
    }
    .c{
        order: 1;
        flex-grow: 1;
    }
</style>
<body>
    <div class="box">
        <div class="a">A</div>
        <div class="b">B</div>
        <div class="c">C</div>
    </div>
</body>

Rem适配布局

根据不同的设备情况按比例设置页面字体的大小
1、是css3 中的相对长度单位
2、当使用rem单位时，根节点<html>的字体大小(font-size)决定 rem的尺寸
强调：rem和em的区别：
a、rem是相对于<html>根节点的字体大小
b、em是相对于父元素的字体的大小
px像素是一个绝对单位

举例：

<style>
    div{
        width: 4rem;  /*相对于根节点的字体的大小，是根节点字体的四倍*/
        height: 4rem;
        background-color: pink;
    }
    @media screen and (min-width:320px){
        html{
            font-size: 20px;
        }
    }
    @media screen and (min-width:750px){
        html{
            font-size: 50px;
        }
    }
</style>
<body>
    <div>测试文本</div>
</body>

媒体查询

又称为媒介查询。是一种自动适配，是根据屏幕比例、窗口宽度、设备的方向等差异来改变页面的显示方式。媒体查询由媒体类型和条件表达式组成。

1、媒体查询的使用方式：
A、内联式：直接在css中使用
<style>
@media screen and (min-width:640px){
css属性：css属性
}
</style>

B、外联式：作为独立的css文件从外部引入
<link href="style.css media="screen and

2、响应式布局容器：需要一个父级元素作为容器，来配合子元素实现显示的变化。

别Null.了

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5新增API，移动端Web布局

HTML5新增的API的使用window.navigator.onLine检查网络状态（false为未连接，true为已连接）检测网络连接的事件（浏览器的兼容性问题）A、'online'：网络连接B、'offline'：网络断开全屏显示：控制浏览器的全屏显示（具有浏览器的兼容问题）A、webkitRequestFullScreen()方法：谷歌浏览器实现全屏显示B、webkitCancelFullScreen()方法：谷歌浏览器关闭全屏显示C、webkitIsFullScree
复制链接

扫一扫