实习期间主要在写微信端H5,遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端,只能自己摸索着来。

方法1:媒体查询

这是最笨工作量最大的方法了,就是一个屏幕尺寸一个屏幕尺寸的适配,当然你没办法适配到所有的手机型号,有的手机比较奇葩,同样是5.5寸,有的矮胖,有的瘦高。我的方法是以iphone6为准,然后向上适配5.5寸,向下适配4.7的iphone5,这个时候就能自适应市场上的一些主流屏幕,然后在对其他品牌手机挑一部分手动适配。

对于工作量小的项目,这个方法还是简单有效的,当然没办法覆盖所有设备,只是一个没办法的办法,这样做其实很痛苦,工作量也大。

方法2:定高不定宽

对于流式布局的页面,我们只要把宽度设置为百分比,而高度设置为px,这样宽度就可以自适应,高度由于是流式布局,损失一点美感,再搭配简单的媒体查询,不会对布局造成太大的影响。

不过我在工作中写的最多的是一些比较不常规的页面,比如下面的这个蛋和锤子都是用绝对定位放上去的,这个时候不管是宽度还是高度都得照顾到。

刚开始我为了让这颗蛋乖乖待在一个位置,用媒体查询写了好多位置和大小宽度,费时费力。

移动开发培训,Android培训,安卓培训,手机开发培训,手机维修培训,手机软件培训

方法3:神奇的 vh、vw

延伸阅读

学习是年轻人改变自己的最好方式-Java培训,做最负责任的教育,学习改变命运,软件学习,再就业,大学生如何就业,帮大学生找到好工作,lphotoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训学习是年轻人改变自己的最好方式