0

我的网站上每个 sae 都有一个幻灯片框display: none，不幸的是，我们使用媒体查询来包含一个移动样式表，它做了很多。滑动框就是其中之一，display:none直到我们认为它是网站的一个非常重要的部分（显示最新的热门内容等），所以我决定重新添加它。

无论如何，长话短说，它使用标签在每张幻灯片之间跳转，标签内是内容的标题，即。'Big Event' 或 'Sign Up Here' 等。在移动设备上，这些都太长了，所以我习惯了一些 jQuery 来根据屏幕将文本更改为 1、2、3、4... 等宽度，节省了很多空间。

<!-- This is only for the mobile site -->
<script>
$(document).ready(function() {
if ($(window).width() < 500) {
    $('#newsTabsControl li:nth-child(1) a').text('1');
    $('#newsTabsControl li:nth-child(2) a').text('2');
    $('#newsTabsControl li:nth-child(3) a').text('3');
    $('#newsTabsControl li:nth-child(4) a').text('4');
    $('#newsTabsControl li:nth-child(5) a').text('5');
}
});
</script>

这是我想到的唯一方法。当我在我的移动设备 (iPhone) 上查看它时，它大多数时候都能正常工作，但有时根本不工作 - 有点不一致。

关于如何使这更容易的任何想法？

4

1 回答 1

1

您可以为此使用 CSS 媒体查询。

更多信息可以在这里看到：http ://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

我想到了这样的事情：

HTML

<div class="desktop-menu"><!-- HTML FOR DESKTOP --></div>

<div class="mobile-menu"><!-- HTML FOR MOBILE --></div>

CSS

.mobile-menu  {display:none}

@media only screen and (max-width: 500px) {

.desktop-menu {display:none}
.mobile-menu  {display:inline}

}
于 2012-04-19T15:00:28.170 回答