我正在为一所小学项目工作,我们必须要加入
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中的font-size设置为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)">
