不同的CSS移動 - 鉻測試 - 一些CSS不能正常工作

我想顯示一個基於PC或手機的不同風格的頁面。不同的CSS移動 - 鉻測試 - 一些CSS不能正常工作

我的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 }

我與鉻通過檢查元素測試，這與iPhone4的選擇選項，菜單鏈接沒有按預期顯示，但iPhone.css中的顏色和背景顏色樣式未採用效果。它顯示爲橫過線。

MobileCssResult

請幫我看看哪裏出了問題，或者提供一個標準的方式來做到這一點。

謝謝。

來源

2012-12-28 itsraja

那麼你使用的設備有多寬？ 'device-width'是設備的寬度（窗口可以水平佔用的最大寬度），而'width'是窗口的寬度（如果應用程序沒有最大化，它將小於設備寬度'）。 – cimmanon

你的'link'標籤應該在你的'head'標籤內。 – Jrod

交換兩個<link>元素。通用樣式表應該先放在第一位，因爲它們的規則將被來自更具體（特定於設備）的樣式表中的規則覆蓋（如果有的話）。

您還應該將<link>標籤放在<head>標籤內 - 否則您的HTML格式嚴重畸形。 WebKit中有很多代碼嘗試儘可能優雅地處理這個問題，儘管...

來源

2012-12-28 14:40:32

不同的CSS移動 - 鉻測試 - 一些CSS不能正常工作

回答

相關問題