我正在为学校做一个小元素,我们必须在其中合并 html5 和 css3。它现在才处于开始阶段,因为我正在尝试为移动版和桌面版创建两个单独的 css 文件。
对于移动版本,我试图让菜单只显示为列表,但字体更大。不过,我无法让它正常工作。
这是菜单的 css:
nav ul {
list-style: none;
background-color: green;
padding: 0;
}
nav li {
border-bottom: 1px solid black;
padding: 5px;
}
nav {
margin-top: -36px;
width: 100%
}
nav h1{
margin: 0;
}
这会在我的桌面上创建以下内容 在我的 iPhone 上
在文件顶部的 HTML 中,字体大小设置为 1em。但是1em对于移动设备来说不够大,所以我想要更大,这似乎是不可能的。
即使我将 nav h1
的字体大小设置为 10em,它也不会比这更大:
虽然在我的桌面上它确实可以正常工作,但它看起来像这样:
当试图使“博客文章”变大时会出现同样的问题,他们就是不会这样做。
我通常使用 CSS 没有问题,但这次我弄不明白。希望任何人都可以提供帮助!我觉得这是非常明显的事情。
这是完整的 CSS:http://snipt.org/zLic5
这是 html:http://snipt.org/zLid2
最佳答案
我看到了你的html代码。您没有添加任何元标记。某些元标记是必需的,当您开发移动网站时,
例如你必须添加 -
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
<title>Welcome to your school name</title>
<!-- smart phone css -->
<link href="assets/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" />
<!-- Tablet -->
<link href="assets/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 800px)" />
<!-- Desktop -->
<link href="assets/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:801px)">
关于html - CSS 字体大小在移动设备上无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14638524/