web移动端-2-流动布局-案例学习

总结

参考:黑马-移动web-day3

总结京东M站:
1.适配问题:移动端设备尺寸不一致
2.流式布局:随着浏览器尺寸的改变做自适应 (掌握)
3.当放到移动端预览:通过谷歌浏览器的模拟器(真机调试:服务器和手机设备在同一个局域网内容即可)
4.视口:在移动端特有的视口会对网页进行缩放
5.视口设置:标准化设置 (掌握)
6.非主流视口设置:淘宝多种比例的缩放(页面的缩放 640 1242)
7.640px 1242px px是css单位  真机的分辨率不是px
8.在移动设备有  物理像素的概念   1px 单位里面可能可以放多个物理像素
9.物理像素比------> 非矢量的网页内容可能会失真
10.标准视口设置里面:2倍图 (掌握)

11. 在移动端尺寸计算都是从边框开始的
12. 移动端特有的属性,在移动端使用css3属性尽可能的加兼容  私有前缀
13. 页面的最大宽度限制的原因:和主流设计稿(640px 750px)
14. 基于流式布局的网页开发(百分比布局)
15. 双飞翼,两栏自适应  (布局方式)

16. 移动端常见的滑动效果:touchstart touchmove touchend (掌握)
17. 衍生:手势事件  swipe 相关事件的原理
18. click在移动端有300ms的延时:1,tap事件 原理  2. fastclick插件使用
19. 区域滚动效果:插件 iscroll

1.两栏自适应

利用:float 和 overflow:hidden 清浮动方法
达到的效果:
粉色左边栏固定,右边自适应
且整个页面宽度=屏幕宽度
在这里插入图片描述
实现代码:
在这里插入图片描述
关键思路:
在这里插入图片描述
在这里插入图片描述

2.iScroll 插件 实现移动端区域滚动效果

参考:黑马 - 18移动web分类 iscroll的使用
在这里插入图片描述
在这里插入图片描述
建多个:
在这里插入图片描述

要注意,里面有 ul - li 时,如果li 时float ,则ul 要清浮动。

3.双飞翼

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_22703205/article/details/88928180