移動端小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; 
    width: 100%; 
    height: 240px; 
    border: 1px solid #ddd; 
}
.md-banner img{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 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;  
    width: 100%; 
    height: 100%;  
}
.md-title{ 
    position: absolute; 
    bottom: 5%; 
    left: 5%; 
    font-size: 1.4em; 
    color: #fff; 
    z-index: 10 
}