css - 如何使我的标题在移动设备上看起来更好

Question

这是我的问题，我怎样才能让我的标题看起来更好

下面是编码...!!

1 索引.php

<div class="header">
<div class="headerFont"><a href="index.php">Yo! Yo! Honey Singh..!!</a>
</div>
<div class="Login">
<form>
Email :<input type="text">
Password :<input type="password">
<input type="submit" value="Login" >
<input type="button" value="register">
</form>
</div>
</div>

2 Web-Style.css

.header{
 top:0;
left:0;
padding:10px;
background:#00688B;
width:100%;
height:footer-<length>;
box-shadow:2px 2x 5px #08298A;
border:1px solid black;
text-shadow:2px 2px black;
}

.header a{
 color:white;
}

.headerFont{
font-family:MATURA MT  ;
font-size:22px;
display:table-cell;
}

.Login{
display:block;
position:absolute;
top:15px;
right:50px;
}

3 Mobile-Style.css

.header {
 width: auto;
}

现在我需要知道如何获得像网站这样的按钮[PIC] -> http://i.stack.imgur.com/vlx09.png我如何使按钮在移动设备上可见但在电脑浏览器上不可见..？？？

Answer 1

1. 在网站的移动版本上创建您想要的按钮。
2. 添加使按钮不可见的 CSS(例如，display: none)。
3. 将 CSS 与媒体查询结合使用以在移动设备上显示按钮。

更多细节在这里:

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/