目录

一.H5的页面存储（本地存储）

1.Cookie：进行页面数据的临时存储。将用户的信息存储在本地，本质是一个文本文件，使用的原因是前后端交互时采用的是http协议。Cookie也是http请求中进行用户跟踪的一种手段。工作流程是：

（1）客户端第一次向服务器发送请求时，没有cookie信息

（2）当服务器端接收到客户端的请求后，生成cookie，在cookie中保留客户的相关信息

（3）服务器将cookie连同其他的信息一起响应给客户端，客户端接收到到cookie后，将其保留在本地

（4）当客户端再次向服务器发起请求时，会将本地的cookie信息一起发送给服务器，服务器会解析cookie中的信息，决定用户是否要登录

（5）特点：

2.HTML5提供的Web Storage：是浏览器存储数据的一种机制

（1）特性：

（2）localStorage：将数据持久存储在本地，除非用户手动删除。

（3）sessionStorage：临时存储数据，属于会话级别。当会话结束后（页面关闭）清除存储的数据

3.IndexDB：是浏览器上用于临时存储数据的非关系型数据库

（1）没有存储上限：存储空间不小于250M

（2）不仅可以存放字符串，还可以存放二进制数据

（3）存放数据的格式：key --- value

（4）使用方式：

二.元素的拖拽：是H5的一个新的特性，是在页面中通过鼠标将元素从一个位置拖放到另一个位置

1.实现过程：

（1）设置元素的draggable属性为true

（2）告诉document，拖放的是谁。即给document注册一个ondragstart事件

（3）要将被拖放的对象放置在何处：给document注册一个ondragover事件

（4）当将被拖放的对象放到指定位置后，拖放的动作完成（拖放结束）：给document注册一个ondrop事件

2.基本思想

（1）在拖放开始时在document中保存被拖放元素的id

（2）拖放结束时通过id找到被拖放的元素追加到文档流中

三.移动页面的布局

1.什么是移动页面适配？

2.移动端页面的设计方向

3.0适配：不做任何适配，使用flex布局后，页面在不同的移动端都可以合理的展示

4.等比缩放：UI设计师设计出页面，会给出页面中个元素的尺寸；Web前端开发工程师会根据设计图100%的进行还原，还原后的页面在不同的移动端效果都是一样的

（1）viewport缩放方案（视口缩放方案）

（2）动态的rem方案

（3）vw方案

四.常用的相对单位

1.em

（1）em的值并不是固定的

（2）em会继承父级元素的字体大小

（3）结论

2.rem

（1）只相对于根元素（html）

（2）通过修改根元素可成比例的调整页面字体大小

（3）其适配方案通过js脚本设置像素点来实现

3.em、rem总结

（1）用rem，不用em，尺寸清晰，易于维护

（2）由于rem是root em，故其与em兼容性是一致的

（3）均是基于像素点适配

4.移动端使用方案

5.vw、vh

（1）vw：1vw 等于视口宽度的1%

（2）vh：1vh 等于视口高度的1%

（3）vmin：选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw

（4）vmax：选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh

一.H5的页面存储（本地存储）

1.Cookie：进行页面数据的临时存储。将用户的信息存储在本地，本质是一个文本文件，使用的原因是前后端交互时采用的是http协议。Cookie也是http请求中进行用户跟踪的一种手段。工作流程是：

（1）客户端第一次向服务器发送请求时，没有cookie信息

（2）当服务器端接收到客户端的请求后，生成cookie，在cookie中保留客户的相关信息

（3）服务器将cookie连同其他的信息一起响应给客户端，客户端接收到到cookie后，将其保留在本地

（4）当客户端再次向服务器发起请求时，会将本地的cookie信息一起发送给服务器，服务器会解析cookie中的信息，决定用户是否要登录

（5）特点：

        a.在服务器端生成，保留在客户端

        b.体积小。存储上限是4k

        c.大量使用cookie会带来性能的浪费

        d.对字符编码格式支持较差

2.HTML5提供的Web Storage：是浏览器存储数据的一种机制

（1）特性：

        a.只在客户端使用，不与服务器发生通信

        b.存储数据的格式：key:value 

        c.大小限制：每个域名5M

        d.使用方法：

                setItem(key,value)：设置值

                getItem(key)：获取值

                removeItem(key)：删除键

                clear()：清空所有

        e.存储的内容：文本、图像、json、数组、样式文件（凡是可以序列化为字符串的数据都可以存储）

（2）localStorage：将数据持久存储在本地，除非用户手动删除。

（3）sessionStorage：临时存储数据，属于会话级别。当会话结束后（页面关闭）清除存储的数据

3.IndexDB：是浏览器上用于临时存储数据的非关系型数据库

（1）没有存储上限：存储空间不小于250M

（2）不仅可以存放字符串，还可以存放二进制数据

（3）存放数据的格式：key --- value

（4）使用方式：

                objectStore.createIndex(key,value) --- 创建index

                objectStore.get(key) --- 获取数据

二.元素的拖拽：是H5的一个新的特性，是在页面中通过鼠标将元素从一个位置拖放到另一个位置

1.实现过程：

（1）设置元素的draggable属性为true

（2）告诉document，拖放的是谁。即给document注册一个ondragstart事件

        a.将被拖放的对象保存起来（即让document记忆下来）

        b.在拖放的过程中可以设置被拖放对象的透明度

（3）要将被拖放的对象放置在何处：给document注册一个ondragover事件

（4）当将被拖放的对象放到指定位置后，拖放的动作完成（拖放结束）：给document注册一个ondrop事件

2.基本思想

（1）在拖放开始时在document中保存被拖放元素的id

（2）拖放结束时通过id找到被拖放的元素追加到文档流中

三.移动页面的布局

1.什么是移动页面适配？

让页面在不同的设备上都可以正常显示

2.移动端页面的设计方向

（1）0适配：使用弹性盒子（flex布局）+媒体查询做微调

（2）等比缩放：给予一个尺寸做设计，其他屏幕进行等比缩放

3.0适配：不做任何适配，使用flex布局后，页面在不同的移动端都可以合理的展示

（1）手机屏幕的布局：各列平均分布、两栏布局

4.等比缩放：UI设计师设计出页面，会给出页面中个元素的尺寸；Web前端开发工程师会根据设计图100%的进行还原，还原后的页面在不同的移动端效果都是一样的

（1）viewport缩放方案（视口缩放方案）

优点：只需要将设计师给出的宽度进行还原即可，适用面比较广

缺点：所有元素一起缩放，对于那些不需要进行缩放的元素就无法控制

（2）动态的rem方案

        a.rem是一个相对的单位。2个rem等于html标签的font-size的2倍

        b.在等比缩放时，需要缩放的元素可以使用rem作为单位，不需要缩放的元素可以使用px作为单位

（3）vw方案

        a.vw是一个相对单位，1vw相当于屏幕宽度的1%

四.常用的相对单位

1.em

        em是一个相对长度单位。其相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

（1）em的值并不是固定的

（2）em会继承父级元素的字体大小

app font-size = 12px
p font-size = 12px * 1.2 = 14.4px
footer  font-size = 20px
//加入js代码

可以看到，网页中所有采用em单位，由于body font-size设置为20px，其他均等比例的扩大

（3）结论

• 我们可以通过设置一个父级元素如html、body font-size,作为整体默认尺寸，通过运行js脚本动态修改font-size实现适配
• 其适配方案依旧是依据像素点来适配
• 需要通过注入脚本实现
• 所有子元素的宽度、高度、font-size等尺寸，均继承与父元素，故增加了我们的计算成本

2.rem

        全称root em，简写rem，故其也是一个相对长度单位，但只相对于根元素，可以简单的通过更改根元素大小，从而调整所有字体大小。

（1）只相对于根元素（html）

（2）通过修改根元素可成比例的调整页面字体大小

（3）其适配方案通过js脚本设置像素点来实现

        其与em的基本用法是一致的，唯独不一致的是，所有元素都是相对于根元素，而不是父级元素，减少了我们的计算成本

app font-size = 12px
p font-size = 12px * 1.2 = 14.4px
footer  font-size = 20px

3.em、rem总结

（1）用rem，不用em，尺寸清晰，易于维护

（2）由于rem是root em，故其与em兼容性是一致的

（3）均是基于像素点适配

4.移动端使用方案

        在移动端适配方案中，使用rem时，通常与scss、less、postcss等预编译器相结合，通过定义一些函数，或者使用一些插件、使我们在开发时，依旧使用px，即设计师给我们的设计稿像素点，通过预编译期将其编译成rem单位。从而实现适配

5.vw、vh

        vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位，是css3的一部分，基于视图窗口的单位，除了vw、vh还有vmin、vmax。

（1）vw：1vw 等于视口宽度的1%

（2）vh：1vh 等于视口高度的1%

（3）vmin：选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw

（4）vmax：选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh

        由于使用vw、vh依赖于视图窗口，故当屏幕分辨率变大或者缩小，尺寸会进行相应的放大或者缩小，当页面足够大，或者足够小时，尺寸会变得很大或者很小，从而导致用户体验差，当然谁会用那么大或者那么小的设备呢？大多数情况下，其实可以忽略不计的，如果你是一个最求完美用户体验的人，可通过rem，对根元素设置最大最小值，配合body加上最大宽度和最小宽度

示例：index.scss

/* rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推 */$vw_fontsize: 75;  /*iPhone 6尺寸的根元素大小基准值 */@function rem($px) {@return ($px / $vw_fontsize ) * 1rem;}/* 根元素大小使用 vw 单位 */$vw_design: 750;html {font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; /* 同时，通过Media Queries 限制根元素最大最小值 */@media screen and (max-width: 320px) {font-size: 64px;}@media screen and (min-width: 540px) {font-size: 108px;}}

html文件

app font-size = 12px
p font-size = 12px * 1.2 = 14.4px
footer  font-size = 20px