可以根据屏幕大小有两个href链接(电话号码和网站链接)吗？html/css
可以根据屏幕大小有两个href链接(电话号码和网站链接)吗？html/css
提问于 2018-07-14 03:38:45
<a href="contact.html" href="tel:5555555555">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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-14 04:06:08
这可以通过CSS Media Queries (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:0000000000" class="button">Phone</a>
</div>
<div class="visible-on-desktop">
<a href="mailto:hi@example.com" class="button">Email</a>
</div>
当设备宽度小于或等于640px时，这将显示电话链接，否则将显示电子邮件链接。
希望它能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51331829
复制相关文章
相似问题