Question

我正在为桌面，上网本和移动电话系统编写三种不同大小的网站。

在主页面上，我有一个

的click-thru html链接

<a href="more.html">Find out more</a>

多种。

我想要的是将其更改为移动屏幕的按钮，例如条件语句等。

有什么想法吗？

由于

Answer 1

您应该在CSS中使用媒体查询。请参阅：http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html

只需更改不同屏幕尺寸的CSS。

Answer 2

关于媒体查询的官方网站。 click here

Answer 3

例如：

@media only screen and (max-device-width: 480px) {
/* define mobile specific styles come here */
a {display:block; width:200px; height:50px;} /* here you add style to your link/class ..*/
}

或..如果您想使用a，那么您可以将其隐藏在桌面版的css中并仅显示移动版

/*desktop css*/
a { ... css code ...}
button {display:none}

@media only screen and (max-device-width: 480px) {
/* define mobile specific styles come here */
a {display:none} /* 
button {display:block; ..}
}

和jquery解决方案：

jQuery(document).ready(function($) {  

    var $is_mobile = false;

    if( $('#some-element').css('display') == 'none' ) {
        $is_mobile = true;      
    }

    // now i can use $is_mobile to run javascript conditionally
 });

对于beter体验，请使用class而不是html元素

Answer 4

使用媒体查询。它们可以帮助您定位屏幕类型并根据其宽度。例如

@media only screen and (min-device-width: 300px) and (max-device-width: 480px) {

    /* Now you can write a different style of elements on a screen with maximum 300px as width */

   a {
      color: #f00; /* Make link appear red on mobile screen */

      /* make it should like a button */
      border: 1px #c00 solid;
      background: #ddd; 
   }
}

注意：媒体查询是CSS3功能，在早期版本的IE中不起作用。

如何使链接在一个屏幕大小中显示为普通链接，在另一个屏幕大小中显示为按钮？

4 个答案: