在小屏幕上使表格按钮变为全角

-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，你能否提供一些代码作为例子，并详细说明你的答案？ –

在小屏幕上使表格按钮变为全角

回答

相关问题