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>2つの要素を交換します。汎用スタイルシートが最初に実行される必要があります。これは、それらのルールが、後続のより具体的な（デバイス固有の）スタイルシートからのルールによって上書きされるためです（存在する場合）。

<link>また、タグをタグ内に配置する必要があり<head>ます。そうしないと、HTMLの形式が大幅に変更されます。WebKitには、これを可能な限り適切に処理しようとするコードがたくさんありますが...

于 2012-12-28T14:40:32.207 に答える