为什么我的 CSS 媒体查询在内部页面上不起作用？

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">