移动端布局

2017-01-13 10:54:38来源:csdn作者:u012967849人点击


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技术实现全面移动端交互


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台