Question

我为朋友创建了一个网页：www.donjas-wellbeingforkids.co.uk

我直接从联系页面创建了一个Facebook Messenger联系我们链接：donjaswell-beingforkids contact

它适用于桌面设备，并且可以直接转到Facebook Messenger，但这不适用于移动设备，因为移动Facebook Messenger的工作方式不同，并将您链接到应用程序。

我有什么方法可以根据屏幕尺寸更改链接？下面我附上了responsive.css文件和我的contact.html文件。

＆＃13;

@media screen and (min-width: 550px) {
  /*******************************************
      TWO COLUMN LAYOUT
      ********************************************/
  #primary {
    width: 50%;
    float: left;
  }
  #secondary {
    width: 40%;
    float: right;
  }
  /*******************************************
      COLLECTIONS
     ********************************************/
  #collections li {
    float: left;
    width: 45%;
    margin: 2.5%;
  }
  #collections li a p {
    font-size: 90%;
  }
  #collections li a:hover p {
    font-size: 95%;
  }
}

@media screen and (min-width: 700px) {
  /*******************************************
      COLLECTIONS
     ********************************************/
  #collections li {
    float: left;
    width: 28.3333%;
    margin: 2.5%;
  }
  #collections li a p {
    font-size: 75%;
  }
  #collections li a:hover p {
    font-size: 80%;
  }
}

@media screen and (min-width: 750px) {
  /*******************************************
      PAGE: ABOUT
     ********************************************/
  .profile-photo {
    float: left;
    margin: 0 5% 1150px 0;
  }
  #collections li a p {
    font-size: 80%;
  }
  #collections li a:hover p {
    font-size: 85%;
  }
}

@media screen and (min-width: 1000px) {
  /*******************************************
      PAGE: ABOUT
     ********************************************/
  .profile-photo {
    float: left;
    margin: 0 5% 800px 0;
  }
  #collections li a p {
    font-size: 100%;
  }
  #collections li a:hover p {
    font-size: 105%;
  }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Contact | Donja's Well-Being For Kids</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/responsive.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>

<body>
  <header>
    <a href="index.html">
      <img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
      <!--
            <h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
            -->
    </a>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <!------------ PRODUCTS -------------------------------------
              <li><a href="products.html">Products</a></li>
              ------------------------------------------------------------->
        <li><a href="contact.html" class="selected">Contact</a></li>
      </ul>
    </nav>
  </header>
  <div id="wrapper">
    <section id="primary">
      <h3>General Information</h3>
      <p>For more details please contact me.</p>
      <p>I have a current DBS Certificate and also Public Liability Insurance.</p>
    </section>
    <section id="secondary">
      <h3>Contact Information</h3>
      <ul class="contact-info">
        <li class="phone"><a href="tel: 07916 337 916">Phone: 07916 337 916 </a></li>
        <li class="mail"><a href="mailto: Donja@Donjaswell-beingforkids.co.uk">Email: Donja@donjaswell-beingforkids.co.uk</a></li>
        <li class="facebook"><a href="https://www.facebook.com/messages/t/1724861014479447" target="_blank">CLick to Message me on Facebook!</a></li>
      </ul>
      <!--
            <h3>Hours of Operation</h3>
            <p>Monday - Friday 8:00am - 5:30pm</p>
            <h3>Address</h3>
    -->
      <p></p>
    </section>
    <footer>
      <!--        <a href="http://twitter.com/lukebennettuk"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>-->
      <a href="http://facebook.com/Donjaswellbeingforkids" target="_blank"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; 2017 Donja's Well-Being For Kids.</p>
    </footer>
  </div>
</body>

</html>

＆＃13;

Answer 1

当然有，只需使用两个链接：

<li class="facebook desktop"><a href="https://www.facebook.com/messages/t/1724861014479447" target="_blank">CLick to Message me on Facebook!</a></li> 
<li class="facebook mobile"><a href="https://www.facebook.com/messages/t/1724861014479447" target="_blank">CLick to Message me on Facebook mobile website!</a></li>

并向css添加媒体查询以隐藏/显示班级

@media (max-width: 600px) {
  .desktop {
    display: none;
  }
}

@media (min-width: 601px) {
  .mobile {
    display: none;
  }
}

Answer 2

这里是Jquery solition

if ($(window).width() <= 768)
{
  changeLink();
}   


function changeLink()
{
    $("a").attr("href", "Your New Link İs Here");
}

Answer 3

在html中包含这两个链接
默认情况下隐藏桌面链接。
在您想要的屏幕尺寸上，隐藏移动链接并显示桌面链接。

＆＃13;

.fb-desktop {
  display: none;
}

@media screen and (min-width: 600px) {
  .fb-desktop {
    display: list-item;
  }
  .fb-mobile {
    display: none;
  }
}

＆＃13;

<ul class="contact-info">
  <li class="phone"><a href="tel: 07916 337 916">Phone: 07916 337 916 </a></li>
  <li class="mail"><a href="mailto: Donja@Donjaswell-beingforkids.co.uk">Email: Donja@donjaswell-beingforkids.co.uk</a></li>
  <li class="facebook fb-desktop"><a href="https://www.facebook.com/messages/t/1724861014479447" target="_blank">CLick to Message me on Facebook!</a></li>
  <li class="facebook fb-mobile"><a href="https://www.facebook.com/messages/t/1724861014479447" target="_blank">Facebook Mobile!</a></li>
</ul>

＆＃13;

我可以根据屏幕尺寸用其他链接替换网页上的链接吗？

3 个答案: