移动端布局

1.移动端布局方案：

viewport 视口:表示的是当前所看到的屏幕的大小（浏览器）

<meta name="viewport" content="width=device-width,initial-sacle=1.0"/>

width=device-width 当前浏览器宽度和真实屏幕宽度一样的

initial-sacle 页面加载 当前浏览器和真实屏幕之间缩放比例

2.主流移动端布局方式：

(1)媒体查询：基于@media属性 获取屏幕宽度，根据不同宽度加载不同的css实现---响应式布局

(2)百分比：页面中任何元素大小，比例都要使用百分比进行布局，百分比子集继承父级 。

缺陷：一旦层级嵌套复杂，需反复计算。优势：可对页面中最外层的容器设置成100%，达到满屏效果。

(3)em布局：em是页面中一个标准的字体长度单位1em = 16px;

为什么使用em进行布局?

a:页面中任何元素宽度和高度都要使用em作为基本单位

b:提出了一个标尺概念 配合媒体查询

I：先在body里面声明基本em单位（font-size）(注意：就是设置em大小，一定要在body里面设置)

II：配合媒体查询进行使用的时候，只要去写一套css就能实现响应式。

III:死角：只要元素中使用了font-size属性，一定会覆盖body里面设置的font-size值，以自身的重新计算。em进行布局的时候，font-size向父级里面进行查找，以自身em单位和父级当中font-size进行相乘计算。

布局中，只要元素中遇到font-size布局全乱

（4）主流移动端布局方式

rem布局 ：root 相对根元素的字体长度。em是在body里面，rem在html里面设置font-size大小

a:强调标尺概念

b:解决了哪些问题：解决了在em中font-size在父级元素里面font-size影响，再也不用像em那样考虑到父级font-size的影响。

3.如何基于设计图来进行移动端布局

响应式设计---------->设计 指的是设计师设计出能同时适应各个终端的设计稿

设计一个网站app在对应不同终端去访问的时候，能呈现不同的界面

一切软件基于设计

2.设计稿版本：

宽度规格：640*960 720*1060 750*1180

3.设计稿和rem之间关系

实际上就是将我们设计稿的图片和浏览器大小做到1:1

①：将浏览器大小设置640宽度

②：将我们设计稿换算成rem进行布局

搜索框：

js动态判断屏幕大小

* restful 标准：主张前后端完全分离，rest休闲

* 前端不需要后端硬性支持，没有后端的前提下，也能进行工作

* 后端在没有前端的基础上面 也能进行独立测试和运行

* json,

* xml,

*

* 闭包封装函数的思想：1.闭包是一个自运行大函数，在内部嵌套了很多子函数

* 2.外部不能直接运行内部子函数，只有闭包对包return的函数才能被调用

* （闭包如何启动）

*

* lib包：凡是第三方提供的一些资源包，库都要放在lib里面

联系这两张图理解回调函数的用法

/*

* 实现核心业务

* 轮播图思路：

* 1.根据接口文档 得到数据结果（请求数据的地址webservice地址）

* 2.将数据结果解析成变量

* 3.绑定到页面中

*/

网页性能优化主要问题：当页面中如果存在多个ajax同时请求数据，一定会出现xhr抢占资源的问题 ：

* 1.从前端来讲：可以设置发送ajax的延迟

* 2.服务端来讲:将多个接口整合成一个

* 3.服务端推动技术：websocket技术

路由：

<footer>

<div><a href="#/">首页</a></div>

<div><a href="#/classify">分类</a></div>

<div><a href="#/shopcar">购物车</a></div>

<div><a href="#/myshow">我的秀</a></div>

<div><a href="#/more">更多</a></div>

</footer>

单页面应用：

1.什么是单页面应用（SPA）

single page application

指的是页面请求路径后面的hash改变，但是hash之前内容不改变，

并且视图变化都是在同一个页面中（index.html）中加载和卸载旧页面完成的

2.如何去构建单页面应用（实现单页应用原理是什么）

* 路由的核心API：

* 1.单页切换原理：index.html中，通过卸载旧页面载入新页面所呈现的视图变化

* 2.路由的概念：控制页面视图改变控制器叫做路由

3.基于单页面应用和ajax技术实现全面移动端交互