1

我正在为台式机、上网本和手机系统编写具有三种不同大小的网站。

在主页上，我有一个点击 html 链接

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

种类。

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

有任何想法吗？

谢谢

4

4 回答 4

3

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

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

于 2013-05-15T23:59:51.913 回答
1

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

@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 中不起作用。

于 2013-05-16T05:09:50.047 回答
1

举些例子：

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

为了获得更好的体验，请使用 class 而不是 html 元素

于 2013-05-16T00:43:18.250 回答
1

关于媒体查询的官方网站。 点击这里

于 2013-05-16T00:12:46.433 回答