为什么移动响应式设计不起作用答案

【问题标题】：why mobile responsive design does not work为什么移动响应式设计不起作用
【发布时间】：2020-07-23 11:00:07
【问题描述】：

我是 CSS 新手，并尝试学习响应式设计。但我的代码无法正常工作。在手机/平板电脑尺寸中，它看起来像是一个 pc 屏幕。有什么问题？

#navbar {
  flex-direction: column;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" media="(max-width:768)" href="css/tablet.css">
<link rel="stylesheet" media="(max-width:500)" href="css/mobile.css">

<header>
  <div class="container">
    <nav id="navbar">
      <h1></h1>
      <ul>
        <li><a href="#home"> anasayfa</a></li>
        <li><a href="#training"> eğitimler</a></li>
        <li><a href="#courses"> dersler</a></li>
        <li><a href="#contact"> iletişim</a></li>
      </ul>
    </nav>
  </div>
</header>

【问题讨论】：

这能回答你的问题吗？ media query working on chrome but not on mobile
我有这个元标记
分享你的完整代码

标签： html css frontend

【解决方案1】：

见link media attribute

此属性指定链接资源适用的媒体。它的值必须是媒体类型/媒体查询。

<link>s 的 media 属性中的媒体查询无效，因为宽度需要单位。例如：

<link rel="stylesheet" media="(max-width:768px)" href="css/tablet.css">

【讨论】：