Question

这是我的第一个问题，所以如果我做错了，我会道歉。

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

对于手机设备和平板电脑，我添加了以下代码，以缩小网页尺寸。

<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浏览网站时，显示普通网站和。有没有人有任何想法？感谢。

Answer 1

您的媒体查询css规则可能不足以覆盖原始css规则。确保它们都符合相同的规则，以便它们在重量方面相匹配。

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

在移动设备上隐藏部分html编码

1 个答案: