移动端小tips

1，改变IOS默认button圆角样式：

-webkit-appearance:none;
outline: none;

2，调用拨打电话：

<a href="tel:021-88888888">立即咨询</a>

3，发送邮件：

<a href="mailto:zjgoing@gmail.com">发送邮件</a>

　　

4，图片适应缩放：

object-fit: cover;

　

5，人民币，美元符号，使用<i></i>标签或者其他标签包括，避免显示诶方框问题：

<i class="price">¥</i>

　　

6，为图片添加渐变遮罩：

HTML：

<div class="md-banner">
    <img src="images/test.jpg" alt="测试图片">
    <i class="md-banner-cover"></i>
    <p class="md-title">测试图片</p>
</div>

CSS：

.md-banner{ 
    position: relative;
    overflow: hidden; 
    display: block; 
     100%; 
    height: 240px; 
    border: 1px solid #ddd; 
}
.md-banner img{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    max- 100%; 
    height: auto; 
    object-fit:cover; 
}
.md-banner-cover{ 
    display: inline-block;
    position: absolute;   
    top: 0;  
    left: 0;
    background-image: -moz-linear-gradient( 90deg, rgba(0,0,0,0.30196) 0%, rgba(0,0,0,0) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgba(0,0,0,0.30196) 0%, rgba(0,0,0,0) 100%);
    background-image: -ms-linear-gradient( 90deg, rgba(0,0,0,0.30196) 0%, rgba(0,0,0,0) 100%);
    z-index: 9;  
     100%; 
    height: 100%;  
}
.md-title{ 
    position: absolute; 
    bottom: 5%; 
    left: 5%; 
    font-size: 1.4em; 
    color: #fff; 
    z-index: 10 
}