0

我正在尝试根据 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 中的颜色和背景颜色样式未生效。它显示为交叉线。

MobileCssResult

请帮我找出哪里出了问题或提供一个标准的方法来做到这一点。

谢谢。

4

1 回答 1

1

交换两个<link>元素。通用样式表应该首先出现，因为它们的规则将被来自更具体（设备特定）样式表的规则覆盖（如果有的话）。

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

于 2012-12-28T14:40:32.207 回答