总结开发移动端页面布局遇到的几个问题

本文旨在总结上周开发的小功能版块中遇到的几个问题。

1.在使用flexbox布局时遇到的问题。

在使用flexbox的时候出现了一个奇怪的问题，就是容器中左边的图片设定了固定的宽高，依旧会发生变形。（并且这个问题只出现在动态取数据的情况下，静态页面不存在此问题）如图一所示：

图一

经过分析发现原因在于：根据实际取到的标题文字数目不同会撑开块并将左边的图片挤压而导致形变。

解决方案一：之前是左边定宽，右边自适应，现在改为将左右用百分比表示宽度。

解决方案二：由于使用了flexbox布局，可以设置flex-shrink:0，当空间不足时该项不会缩小。或者使用flex-basis属性，设置项目占据的主轴空间。

总结：在使用flexbox布局时和平常做左部定宽右部自适应的布局时有小小的不一样，就是不能只设置宽度，要用flex-basis专门设置项目占据的主轴空间。（ps:对基本知识运用不够灵活，掌握不够娴熟）

2.图片大小不一，处理问题。

根据实际情况，每条新闻的封面图片都是大小，长宽比例不一的，但都要放在相同大小的块中展示，如何保证它们看起来不变形，效果良好的展示。

这个问题棘手在已有的数据中图片都是大小不一的，最终用以下两种方法只能缓解，如果有人有更好的办法欢迎评论，多谢~：

方案一：使用背景图片展示，将图片设置为固定大小的div块的背景，然后设置background-position:center，这样可以将图片中间的主要内容展现出来，但缺点是遇到一些像素很高的图片只会展示中间一小部分。

方案二：将块固定长宽 overflow:hidden，然后图片宽度width:100%，margin-top:-15px（这个偏移可以根据实际情况而定）。前后对比如图二，三所示。当然这个也只能解决大部分情况，不能解决所有情况。

图二（前）

图三（后）

3.超出省略问题

之前经常用到的是单行文本超出省略，这次是两行文本超出需要省略。

单行解决方案：

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

两行解决方案：

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

4.文字显示不全问题

一开始在pc端用谷歌浏览器模拟调试都没有问题，但在手机上运行后出现文字显示不全的问题，如图四。

图四

使用rem设置了块的高度和字体，但rem是相对于根元素去计算字体大小的，并不是所有的设备上根元素的大小都是相同的，由于这些误差导致在一些手机浏览器上出现文字超出显示不全。

原因：因为Chrome设置了最小字号为12px，导致如果在宽高、行高、边距等地方用rem，虽然在html那设置了10px，但默认还是会按照12px来计算，所以实际会偏大。建议rem只是在字号上用比较好。

解决方案：首先设置根元素的字体大小。其次将宽高的单位改为px（还是rem使用的不当）;

html{ font-size:10px}  .title{ font-size:2rem;}

以上是这次开发中遇到的几个布局问题，有一些虽然暂时解决了，但希望还可以找到更好的方案和解释。欢迎大家指正！

相关链接：flexbox布局   文本溢出显示省略  关于rem的bug问题