在小屏幕上使表格按鈕變爲全角

-1

嘗試在小屏幕上使基於邊框的按鈕變爲全角。需要通過CSS和HTML工作，因爲這是一個無法使用JS的電子郵件。在小屏幕上使表格按鈕變爲全角

任何想法？

嘗試使用媒體查詢，但它沒有奏效。

P.S.邊框按鈕這裏描述的：https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

.container { 
 
    width: 100%; 
 
    height: 300px; 
 
    background-color: #000000; 
 
} 
 

 
.link-button { 
 
    font-size: 16px; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    border-radius: 20px; 
 
    -webkit-border-radius: 20px; 
 
    -moz-border-radius: 20px; 
 
    background-color: #EB7035; 
 
    border-top: 12px solid #EB7035; 
 
    border-bottom: 12px solid #EB7035; 
 
    border-right: 18px solid #EB7035; 
 
    border-left: 18px solid #EB7035; 
 
    display: inline-block; 
 
} 
 

 
@media only screen and (max-width: 480px) { 
 
    .inner-table { 
 
    width: 100%; 
 
    } 
 
}

<div class="container"> 
 
    
 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="outer-table"> 
 
    <tr> 
 
    <td> 
 
     <table border="0" cellspacing="0" cellpadding="0" class="inner-table"> 
 
     <tr> 
 
      <td> 
 
      <a class="link-button" href="http://google.com" target="_blank">I am a button</a> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table> 
 
    
 
</div>

來源

2017-08-04 bennygill

你沒有爲小屏幕製作按鈕100％ – inarilo

你真的需要在不同分辨率下的不同行爲嗎？我的意思是，你可以讓每個人都變寬，也可以保持原樣。 – Anarion

爲什麼不使用'button'或'a'而不使用邊框技巧呢？ –

對於其他人來說，答案是設置。鏈接按鈕類作爲一個塊而不是行內塊。

.inner-table { 
 
    text-align: center; 
 
} 
 

 
.link-button { 
 
    font-size: 16px; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    border-radius: 20px; 
 
    -webkit-border-radius: 20px; 
 
    -moz-border-radius: 20px; 
 
    background-color: #EB7035; 
 
    border-top: 12px solid #EB7035; 
 
    border-bottom: 12px solid #EB7035; 
 
    border-right: 18px solid #EB7035; 
 
    border-left: 18px solid #EB7035; 
 
    display: inline-block; 
 
} 
 

 
@media screen and (max-width: 480px) { 
 
    .link-button { 
 
    display: block !important; 
 
    } 
 
}

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="outer-table"> 
 
    <tr> 
 
    <td> 
 
     <table border="0" cellspacing="0" cellpadding="0" class="inner-table" width="100%" > 
 
     <tr> 
 
      <td> 
 
      <a class="link-button" href="http://google.com" target="_blank">I am a button</a> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

感謝@CBroe誰提供的評論這個答案。

來源

2017-08-04 11:35:41 bennygill

嘗試添加最小寬度爲小屏幕

來源

2017-08-04 11:04:43

你好@achraflakhdar並歡迎來到SO，你能否提供一些代碼作爲例子，並詳細說明你的答案？ –

在小屏幕上使表格按鈕變爲全角

回答

相關問題