在移动端徜徉,转眼间,又是周一

原创 悠游 随笔 前端之路 323阅读 2017-12-18 22:51:35 举报

一转眼,又是一个周一。
我攒了一周的心情和美食,又像上次一样周一拿来发布。
这样算是变相的给自己一个好的一周开端么?
上周一周学习了手机端,用了两天时间做出了我们的移动端第一个界面。
不足之处仍有很多,学到的东西也是实实在在的很多。
移动端需要注意的要点也是不少,大致罗列了一下知识点,希望对大家和我自己都能有用。
一,移动端布局需注意知识点
1、测量设计图宽度,找到动态像素比之后符合设计图宽度的模拟器;
2、设置移动端适配,动态像素比;
3、选择使用单位;
4、框架搭建,选择使用固定定位或者绝对定位来搭建框架;
重点:注意滚动条情况。
大致框架搭建好之后,就可以着手填充内容。
需要注意的东西仍然不少,不是一两句话写的清楚的。
刚好今天的作业已经圆满完成,项目总结也已经整理成文,可以直接发出来给大家看一看。各位看官还请口下留情,莫要吐槽的让我怀疑人生......
......附件上传不成功......
我还是复制粘贴过来吧,就是可惜了那正规的排版。

移动端项目开发总结

途牛网 移动端页面开发

姓名:XXX 日期:2017年12月18日

开发进度时间表
开发阶段 起止时间
途牛网 移动端首页 2017/12/13 - 2017/12/15

开发中遇到的问题及解决方案
1)移动端开发,如何定位固定的头部底部,并且不遮挡内容。
解决方案:移动端需要固定头部和底部,以方便随时查看搜索与本帐户信息等。可以使用两种定位方式来做,固定定位与绝对定位。将头部底部定位完成后还需要提升头部层级,避免被内容遮盖,同时为内容设置等同于头部底部高度的padding值,避免内容被遮盖。
同时还有滚动条问题,在不设置高度的时候,html和body的高度都是由内容撑开的,而滚动条在html身上,这样会导致定位后头部底部依然无法显示在固定位置,首先需要给html和body同时设置height:100%;使两者的高度同可视区域等高;其次给html设置overflow:hidden;隐藏超出可视区域的部分,同时给body设置overflow:auto,使其拥有滚动条(auto优于scroll的一点是,在未超过当前可视区高度时,滚动条不被显示);最后将需要固定定位的元素以html作为参照父级,来设置绝对定位,此时滚动条已从html转移到body,可以达到理想中的效果。
2)搜索框的字体大小问题。
解决方案:搜索框本身使用input文本框来写,在a标签中设置字体大小是无效的,必须单独为input设置字体大小,才能显示实际的大小,否则字体就会特别小,不方便查看和使用。
3)如何让图片、背景图能够自适应各型号移动端宽高显示。
解决方案:当图片宽度大于高度时,给图片设置宽度width:100%;使其撑满父级宽度;高度大于宽度时设置高度height: 100%;使其撑满高度,用以达到各种型号的移动端图片自适应。背景图由于有具体且固定的像素值,需要在设置背景图片后,加上background-size:100%,让它具备伸缩性。

从此项目中学习到的经验与技巧
1)移动端开发中input搜索框中的字体大小需要单独设置,因其本身性质特殊,无法随着a标签的设置而改变,必须单独设置,否则显示效果有差异影响使用。
2)图片像素比可以用语言自动计算出来,避免手动计算失误造成呈现效果差异。
3)用模拟器固定定位头部和底部,必须提升层级,内容区域才会显示在其下方。但同时首尾占位处的内容区域会被遮挡,此时需要根据实际情况给内容区域上下等同于头部底部的margin值或者padding值,使内容可以完整显示。
4)在移动端开发中,尽量避免套用样式,能单独写的样式一定要单独写,否则在自适应问题上容易出现不好调整的状况。
5)可以使用弹性盒模型布局。较为适用有固定宽度的模块内部元素排列,无需考虑列表左右margin之和是否超出父级宽度,是否需要单独设置noMargin。父级设置display:flex后,只有其下一层的子元素同时具备弹性盒模型的特性,如:内联元素变得可以支持宽高。当主轴为横向,元素个数过多时,不设置换行,元素宽度会被压缩,挤在同一行显示,但是主轴纵向,元素个数过多,子元素则会超出父级显示,因此,需要视具体情况考虑是否需要设置换行。
6)移动端的底部文字行高设置后,文字显示与行高设置不符,多数情况下会偏下显示,但是切换模拟器型号后一部分模拟器中显示正常,一部分任然显示偏下。此问题暂定为模拟器差异问题,未能解决,只能尽量多测试。

评论 ( 1 )
最新评论
hugeannex 2017-12-19 09:32:31 1F

3)如何让图片、背景图能够自适应各型号移动端宽高显示。
当高什么宽什么什么什么时,background-size:cover;填满。。。哪来这么多事?