0

这是我的第一个问题，所以如果我做错了什么，我深表歉意。

我正在为我的一个朋友的餐饮企业设计一个网站，我使用无序列表创建了一个简单的菜单。

对于移动设备和平板电脑，我添加了以下代码以缩小页面。

<meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">

问题是，菜单没有按比例缩小并且不在屏幕上。为了解决这个问题，我使用以下代码创建了一个菜单，我希望在移动设备上使用它。

<select> 
<option value="" selected="selected">Select</option>     
<option value="index.html">Home</option> 
<option value="about.html">About us</option> 
<option value="/blogs/five-simple-steps-blog">Blog</option> 
<option value="/pages/about-us">About Us</option> 
<option value="/pages/support">Support</option> 
</select> 

<script>
$("select").change(function() {
window.location = $(this).find("option:selected").val();
});
</script>

现在，我希望在使用移动设备时隐藏原始使用 css，然后在使用桌面时隐藏。为此，我使用了以下 CSS。

select
{
display:none;
}

@media (max-width: 960px) {
ul    { display: none; }
select { display: inline-block; }
}

除非由于某种原因，当使用iphone浏览网站时，会显示普通网站和普通网站。有没有人有任何想法？谢谢。

4

1 回答 1

0

您的媒体查询 css 规则可能不够强大，无法覆盖您的原始 css 规则。确保它们都匹配相同的规则，以便它们在重量方面也匹配。

您还可以尝试通过在媒体查询 css 规则中添加 !important 来调试它，以查看它是否真的只是一个覆盖问题。

于 2013-10-06T18:50:03.330 回答