在iconfont.cn选择图标注意的几个问题, iconfont图标大小

在用iconfont的过程中,经常遇到图标大小显示不一致,实际上是因为在选的时候没有注意到细节,注意到下面的几个细节,就可以图标大小一致,下图为例:

fonicon大小对比

1、用chrome查看,黑色的框内(svg.icon)数值一致,此值显示了原图的比例,如果比例不一致,导致图标大小不一。

2、在淡蓝色的区块中,明显看到钻石的顶部和底部没有抵满,在页面上显示的时候会显示钻石更小,虽然尺寸一样。

3、明显钻石的线条更粗,这样如果背景和字体的颜色反差较大,能明显感觉钻石突兀,所以选的时候尽量选择线条粗细一致的图标。

另外在选择图标的时候尽量选择同样边框的图标,比如一个是圆角一个是直角的图标,这两种图标排列在一起的时候,感觉很不好。

echarts宽度 100px的问题 % px

在使用echarts的时候发现echarts的宽度变成了100px,明明设置的是100%,一般出现这种情况是在tab切换或者bootstrap的模态框里面,原因是当tab或者modal在隐藏的时候,无法获取到他的宽度值,echarts默认100px的宽度,我用的是bootstrap的modal,解决办法:

第一步、使用modal的shown.bs.modal方法获取弹出框的宽度。

官方文档:当模态框对用户来说可见时(需要等待CSS过渡完成),会触发该事件。如果是由点击引起的,被点击的元素是可用的,成为Event对象的relatedTarget属性。

第二步、使用echarts的resize方法,重新设置大小。

bootstrap 表头中文导致换行的问题

另外 table-responsive一定要加到table的外面的容器里去,如果加到table上,会造成thead不会100%的情况,如

显示如下:

正确的方法是