UDN-企业互联网技术人气社区

板块导航

浏览  : 1835
回复  : 0

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

[复制链接]
芭芭拉的头像 楼主
发表于 2016-12-31 15:43:26 | 显示全部楼层 |阅读模式
  1.在使用flexbox布局时遇到的问题。

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

  图一

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

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

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

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

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

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

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

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

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

  图二(前)
2.png

  图三(后)

  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端用谷歌浏览器模拟调试都没有问题,但在手机上运行后出现文字显示不全的问题,如图四。
1.png

  图四

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

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

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

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

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部