移动端是什么,有哪些布局方式
移动端技术选型:
1.主流
流式布局(百分比布局) ;
less+rem+媒体查询布局 ;
flex弹性布局(强烈推荐) ;
混合布局 ;
2.其次
媒体查询 ;
bootstarp ;
1.1 流式布局
京东移动端首页:
二倍精灵图做法
在fw里面把精灵图等比例缩放为原来的一半之后根据大小 测量坐标,注意代码里面的background-size也写:精灵图原来宽度的一半图片格式DPG图片压缩技术。
京东自主研发的技术,该技术可直接节省用户近50%的浏览量,极大的提升了网页打开速度,能够兼容jpeg。webp图片格式谷歌开发的一种旨在加快图片加载速度的图片格式,图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器宽带资源和数据空间。
1.2 flex布局
体验flex布局
传统布局:
1.兼容性好;
2.布局繁琐 ;
3.局限性;
flex弹性布局
操作方便,移动端应用很广泛,pc端情况差 3.IE 11或更低版本很难支持2.flex布局原理。
定义:flexible box弹性布局,任何一个容器都可以指定为flex布局,容器和项目 例如div里面放个span。
注意点:当我们为父元素设置flex,子元素的float,clear,vertical-align属性将失效子容器可以横向排列也可以纵向排列。
总结:通过给父盒子添加flex,来控制子盒子的位置和排列方式 。
1.3 rem布局
1.4 响应式布局
总结:每种布局都有自己的优点和缺点,不同的布局用于不同的场合,天津天迅达科技有限公司开发人员擅长以不同的布局方式为不同的手机定制页面,制定适合的开发方案。
以上所有设计图和部分文字均来自网络,如有侵权,请call我删除,感谢~
天津天迅达科技有限公司经过多年来对APP、小程序、以及网站建设的探索,已经帮助每一个客户快速开发出属于自己的APP、小程序、网站,是万千企业之选。
- 数字孪生:现实世界的身外化身 2024-12-06
- 微信公众号全面“今日头条化”,自媒体将迎来“第二春”? 2024-12-04
- 优质长视频的破圈效应 2024-12-05
- 奶茶行业的裂变营销 2024-12-03
- 浅浅分享下支付产品经理如何写全局性的需求文档以及工作流程 2024-12-02
- “麦学”爆红:一场精心策划的营销盛宴 2024-11-29
- 如果遇到麦琳式的领导,怎么办? 2024-11-28