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

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

这个问题棘手在已有的数据中图片都是大小不一的，最终用以下两种方法缓解：

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

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

超出省略问题

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

单行解决方案：

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

两行解决方案：

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

文字显示不全问题

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

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

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

解决方案：首先设置根元素的字体大小。其次将宽高的单位改为px;

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