开发的一些小技巧

font-size:0;

解决inline-block元素之间的空白缝隙，可以高程度的还原设计图。因为元素节点有文本节点，在缩进代码时会占据宽度，

很多浏览器中的 inline-block 元素之间会莫名其妙多出3px的间距，其实这个是换行符，如果将 inline-block 元素间的换行符去掉，这3px的间距就会消失了。可以在inline-block的父元素中加上 font-size:0，然后在 inline-block 中将字体设回来。 

 

transform: scale(0.5,0.5);

在小程序里面，设置border:1rpx solid color;，在不同的ios机型下会显示不全，有的边框被隐藏了，这个时候可以先把盒子设置大一倍，再缩小就好了；

 

ios上click没有效果

click事件在PC端和安卓上都可以点击，但是在ios上点击却没有任何反应

因为在ios上类名为click-btn的div元素上没有click事件，它是touch事件,如果把click-btn的div改成button,在ios上是可以点击的,div本身默认不能点击，解决方案如下：

方案1：在样式中添加属性cursor:pointer;

方案2：添加touchstart事件document.body.addEventListener('touchstart', function() {});

方案3：可以将标签改成button标签或者a标签

 

图片变形

1.父容器如div设置固定width和height，设置 overflow: hidden，设置相对定位;img设置绝对定位，设置最大宽度max-width:100%，left、top、right、bottom值为0，设置margin:auto。这样可以解决不同尺寸的图片在同一个盒子里垂直水平居中，看起来又不会显得图片变形。
 

2.加上 object-fit: cover 就会让图片符合盒子大小

 

字体上下有间距

在容器里面的字体，上下是有一段间距的，但是设计图上的行间距是字与字之间的，所以要还原设计图效果，可以给字体设置大小，然后设置高和字体大小一样，再设置行间距和字体大小一样就没有上下的间距了

 

字体风格

在开发过程中，设计稿上都有字体风格,font-family，有的不一样，这个时候需要给body设置一个公共样式 font-family: "PingFang SC", "San Francisco", "Helvetica Neue", Helvetica, "Microsoft Yahei", Arial, "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;  其他有一些特殊的在单独给类名上加，这个Body样式就处理了兼容，挨个去适配机型匹配的风格。