又过了两个多月,也又碰到了各种大大小小的问题。之前总结传送门:移动端问题初总结
相对于上次来说,这次的问题更多是细节了,有些问题不解决理论上其实也无伤大雅。但你奈何不了一个对自家产品强迫症到极点的BOSS,就算你跟他说某某某某大公司的页面也是这样的,那也还是得解决的。
1)区块内字体不能垂直居中,在移动端产生偏移
其实这个问题在之前就注意过,手机自带浏览器就有这样的情况。此时为了举例去看,已经没有这种写法了,想必也是觉得不够“优雅”。但是这种例子随便找找还是有的,发现BAT上基本都有这种元素,随手截下来,三者在IOS下均大致居中。其中腾讯算是处理的比较好的,但是也有局限,字体只能在12px以下,否则依然会看出来偏移。所以当你字体不得不更大一些时,又不得不处理这个问题时,那么就只能用js判断设备再进行设置了。当外框足够大或者字体足够小时,偏移都不那么明显。
2)字体大小与预设不一样
解决方法,给文本容器设置max-height。详细查看:移动端的字体大小与CSS中不符
3)缩略图不变形
文章详情中,图片没办法规定大小,那么在获取其缩略图时,自然也就有图片变形的情况了。因此去研究了微博的图片缩略图显示规则:居中显示,超出隐藏。当宽高比例大于预设的比例时,则设置图片高度为100%,否则设置宽度为100%。特地上传几张小图,发现新浪也直接进行放大了,因此我额外加上了判断,不进行放大。
HTML: (其中.imgBox是为了控制排列方式)
<div class="imgBox"> <!--每张图片单独一个div.img--> <div class="img"> <img src="images/sf15.jpg" alt=""/> </div> <div class="img"> <img src="images/sf14.png" alt=""/> </div> <div class="img"> <img src="images/sf01.jpg" alt="" /> </div> <div class="img"> <img src="images/sf65.jpg" alt="" /> </div> </div>
CSS:
.img { /*此尺寸需要UI,不同的图片数量只需要更改宽高即可*/ width: 23%; height: 200px; overflow: hidden; margin: 100px auto; } .img img { position: relative; left: 50%; top: 50%; transform: translate(-50%,-50%); } .imgBox { display: -webkit-flex; display: flex; justify-content: space-between; }
JS:
/*等比例缩小*/ $('.img').each(function(){ var length = $(this).find('img').length; var wd = $(this).width(); var hg = $(this).height(); var $img = $(this).find('img'); /*如果小于.img 则不做任何操作,保持居中即可*/ if($img.width()*hg > $img.height()*wd && $img.width() > wd ){ $img.height('100%'); }else if($img.width()*hg < $img.height()*wd && $img.height() > hg ){ $img.width('100%'); } })
最后结果:
4)position: fixed的div中内容过长时,可滚动查看
给这个div设置 overflow: auto; height: 100%; 即可,两者缺一不可。
好了,第二集就到这了~~希望自己收获越来越多。