移动端是什么,有哪些布局方式

日期:2023-04-03  作者:小天  来源:www.txunda.com  人气:522

移动端技术选型: 

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小程序网站,是万千企业之选。

标签:天迅达科技 天津APP开发 天津网站建设 网站建设