html - 我可以根据屏幕尺寸用另一个链接替换网页上的链接吗？-6ren

html - 我可以根据屏幕尺寸用另一个链接替换网页上的链接吗？

转载作者：太空宇宙更新时间：2023-11-03 19:36:02

我为 friend 创建了一个网页:www.donjas-wellbeingforkids.co.uk

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

它非常适用于台式机，可将您直接带到 Facebook Messenger，但这不适用于移动设备，因为移动 Facebook Messenger 的工作方式不同，并将您链接到应用程序。

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

@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%;
  }
}

<!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>

最佳答案

当然有，只需使用两个链接，如下所示:

<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;
  }
}

关于html - 我可以根据屏幕尺寸用另一个链接替换网页上的链接吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45799724/

文章推荐： html - 如何在 CSS 中的文本前画一条线？

文章推荐： c# - 从带有文本引号的列表中解析

文章推荐： matlab - 使用编程查找每个像素的坐标

文章推荐： c# - 当数据读取器可能没有特定列时要检查什么？

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 我可以根据屏幕尺寸用另一个链接替换网页上的链接吗？