不同的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不能正常工作

回答

相关问题