是否可以根据屏幕大小设置两个href链接(电话号码和网站链接)?html/css

Question

<a href="contact.html" href="tel:[phone]">Contact</a>

我正在尝试创建一个联系人按钮，如果用户不在手机屏幕上，它会将用户带到网站链接。然而，如果用户的屏幕小于1280像素，即@media screen and (max-width: 1280px) {...，那么我希望联系人按钮拨打链接中的号码。

我在那里的任何一个href都很好，但我正试图根据屏幕大小来获得两者。有没有办法让这成为可能？

编辑：

.button {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
background-color: darkgreen;
border-radius: 5px;
border: 0;
color: #fff;
cursor: pointer;
display: inline-block;
padding: 0 1.5em;
line-height: 2.75em;
min-width: 9em;
text-align: center;
text-decoration: none;
font-weight: 600;
letter-spacing: -0.025em;
}
.button:hover {
background-color: green;
color: #fff !important;
}
.button:active {
background-color: green;
color: #fff;
}
#banner header .button {
vertical-align: middle;
margin-left: 1em;
}

Answer 1

这可以通过CSS媒体查询完成(https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)

所以基本上，你会有两个链接：

.visible-on-mobile {
display: none;
}
.visible-on-desktop {
display: inline;
}
@media only screen and (max-width: 640px) {
.visible-on-mobile {
display: inline;
}
.visible-on-desktop {
display: none;
}
}

<div class="visible-on-mobile">
<a href="tel:[phone]" class="button">Phone</a>
</div>
<div class="visible-on-desktop">
<a href="mailto:[e-mail]" class="button">Email</a>
</div>

当设备宽度小于或等于640px时，这将显示电话链接，否则，将显示电子邮件链接。

希望它能有所帮助！