<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;
}
https://stackoverflow.com/questions/51331829
复制相似问题