移动端布局

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





  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值