Question

我正在使用媒体查询来设置断点，以根据最小和最大屏幕尺寸调整html元素的样式。它在我的索引页面上完美运行，但链接到同一样式表并使用共享类的内部页面无法调整。

以下是我的一个工作媒体查询，其功能是将标题div折叠为导航菜单：

@media (max-width: 700px) {
  input.navigate   { display: none; }
  img.googlepic {display: none;}
  img.navpic {display: none;}
  nav select { display: inline;}
}

以下是index.html的相关代码：

<div class="header">

    <a href="index.html#pagetop"><input class="navigate" type="button" value="Home"></a>
    <a href="demo.html"><input class="navigate" type="button" value="Learn More"></a>
    <a href="aboutus.html"><input class="navigate" type="button" value="About Us"></a>
    <a href="blog.html"><input class="navigate" type="button" value="RMS News"></a>
    <a href="index.html#contactus"><input class="navigate" type="button" value="Contact Us"></a>
    <img class="googlepic" src="images/chrome.png">
    <img class="navpic" src="images/icx.png">

<nav>
    <select> 
    <option value="" selected="selected">Nav</option> 
    <a href="index.html#pagetop"><option value="index.html#pagetop">Home</option></a>
    <a href="demo.html"><option value="demo.html">Learn More</option></a>
    <a href="aboutus.html"><option value="aboutus.html">The RMS Team</option></a>
    <a href="blog.html"><option value="blog.html">Blog</option></a>
    <a href="index.html#contactus"><option value="index.html#contactus">Contact Us</option></a>
    </select> 

</nav>
</div>

将相同的代码复制并粘贴到我网站的内部页面中，但媒体查询不会影响它们。

Answer 1

视口的元标记未设置在内部页面上。

<meta name="viewport" content = "user-scalable=no, width=device-width">
<meta name="viewport" content="initial-scale=1.0">

为什么我的css媒体查询无法在内部页面上运行？

1 个答案: