css - 用于移动设备的不同CSS-Chrome测试-一些CSS无法正常工作

我试图显示基于PC或移动设备的具有不同样式的页面。

我的HTML，

<link media="only screen and (max-device-width: 780px)" href="iPhone.css" type="text/css" rel="stylesheet" />
<link href="pc.css" type="text/css" rel="stylesheet" />


 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <html>
 <head>
   <title>My first styled page</title>
 </head>

 <body>

 <!-- Site navigation menu -->
 <ul class="navbar">
    <li><a href="index.html">Home page</a></li>
    <li><a href="musings.html">Musings</a></li>
    <li><a href="town.html">My town</a></li>
    <li><a href="links.html">Links</a></li>
 </ul>

  <!-- Main content -->
 <h1>My first styled page</h1>

  <p>Welcome to my styled page!</p>

  <p>It lacks images, but at least it has style.
    And it has links, even if they don't go
     anywhere</p>

   <p>There should be more here, but I don't know
   what yet.</p>

    <!-- Sign and date the page, it's only polite! -->
    <address>Made 5 April 2004<br>
     by myself.</address>

   </body>
   </html>

我的pc.css

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

和iPhone.css，

body {
  color: #FFFFFF;
  background-color: #000000 }
ul.navbar {
    display : none }

我通过Inspect Element和chrome测试了此功能，并选择了iPhone4选项，菜单链接未按预期显示，但iPhone.css中的颜色和背景颜色样式未生效。显示为交叉线。

请帮助我找出问题出在哪里，或提供标准的方法来解决此问题。

谢谢。

最佳答案

交换两个<link>元素。通用样式表应该放在首位，因为它们的规则将被随后的更具体的（特定于设备的）样式表中的规则所覆盖（如果有的话）。

您还应该将<link>标记放在<head>标记内-否则HTML格式严重错误。 WebKit中有很多代码试图尽可能优雅地处理此问题，但是...