<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a class="hide_mobile" href="main.php">Login</a>
<a class="hide_pc" href="main.php#login">Login</a></li>
</ul>

/*standard css*/
.hide_pc{
display:none;
}

/*media query*/
@media screen and (max-width: 490px)
{
.hide_mobile {
display:none;
}

.hide_pc {
display:block;
margin:auto;
width:84px;
}
}

<a id="login"></a>