如何掌握学习移动端Web页面布局

运行在移动端的项目就称为移动端项目。那什么是移动端呢,主要是指我们的一些手持设备,最具有代表性的就是我们日常使用的手机和平板,当然还包括一些其他便携设备,如智能手表,掌上游戏机,等流动装置。

如何掌握学习移动端Web页面布局

 随着科技的进步,及人们日常生活节奏的加快,我们通常花费在手机等移动设备上的时间比使用电脑的时间越来越多,为了适应市场及用户的转变,越来越多的服务从PC端转向移动端,就导致移动端有着强大的发展前景和巨大的市场,作为一个Web高级前端开发工程师,移动端页面布局也成了我们必须掌握的技能之一。并且,移动互联网的大时代已经到来,学会移动端页面,才能高薪就业。如何掌握学习移动端Web页面布局

如何掌握学习移动端Web页面布局

 

而在移动端项目的开发过程中我们也会遇到各种在PC项目中从未遇到的问题:如设备种类多且更新换代快,项目不能实时跟进;各个浏览器厂商不统一,导致各种兼容问题;网络信号强弱,导致体验不同;HTML5学习成本太高等等。以上这些问题都需要我们前端开发人员来给出对应的解决方案,也就要求我们同时需要具有移动端页面开发的能力。我们千锋《大前端》的课程,也就应运而生。目前流行的前端框架:vue,angular,react,如何掌握学习移动端Web页面布局

如何掌握学习移动端Web页面布局

 

在移动端页面布局中,我们除了需要了解viewport的概念,还需要了解一些移动端设备特有的属性,当然并不是这些属性在PC端不存在,而是在PC端这些属性对我们的页面不会产生影响:

移动端常用的布局方式,弹性布局:顶部与底部的banner不管分辨率怎么改变,他的宽度和位置都不变,中间每条招聘信息不管分辨率怎么变,招聘信息的图标信息都位于条目的左边,薪资都位于右边;等比例缩放布局:使用js动态获取viewport的宽度并按照一定比例设置给html的font-size后,可以实现强大的屏幕适配布局,(一般淘宝,腾讯,网易等网站都是rem布局适配),因为rem能等比例适配所有屏幕,根据html的字体大小来控制rem的大小。

猜你喜欢

转载自www.cnblogs.com/CQqf/p/10830219.html