我的网站使用来自不同地方的各种引导程序组件和表单，所以我必须编写一个公共的header.html文件，它被加载到每个页面 - 而页面与他们自己的CSS文件不同，header.html是加载并没有链接到任何CSS，而是有自己的内联CSS编写。
似乎工作正常，但在手机上看起来很糟糕。我正在寻求帮助来审核我的代码并建议编辑：
以下是头文件的外观：
https://www.easyaccom.com/header/header.html
以下是代码：
=======
body
{
background-color: #fff;
}
#nav
{
font-family: 'Open Sans', sans-serif;
font-weight: 400;
position: fixed;
top: 0;
right: 1%;
z-index: 1030;
}
#nav > a
{
display: none;
}
#li-bg
{
border: 1px solid #fafafa;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
#nav li
{
position: relative;
list-style:none;
-webkit-border-radius: 6px;
border-color: #333 1px solid;
-moz-border-radius: 6px;
border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
background-color: transparent;
}
#nav li a
{
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #fff;
white-space: nowrap;
background-color: #fcfcfc;
}
#nav li a:active
{
background-color: #3498db!important;
}
#nav span:after
{
width: 0;
height: 0;
border: 0.313em solid transparent; /* 5 */
border-bottom: none;
border-top-color: #fff;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em; /* 5 */
}
/* first level */
#nav > ul
{
height: 2.75em; /* 60 */
}
#nav > ul > li
{
height: 100%;
float: right;
width: 130px;
background-color: #3498db;
}
#nav > ul > li > a
{
height: 100%;
font-size: .95em; /* 24 */
line-height: 2.5em; /* 60 (24) */
text-decoration:none;
text-align: center;
background-color:transparent;
}
#nav > ul > li:not( :last-child ) > a
{
border-right: 1px solid transparent;
}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a
{
}
/* second level */
#nav li ul
{
display: none;
position: absolute;
top: 100%;
padding-top: 8px;
padding-left:40px;
}
#nav li:hover ul
{
display: block;
left: 0;
right: 0;
}
#nav li:not( :first-child ):hover ul
{
left: -1px;
}
#nav li ul a
{
font-size: 1.25em; /* 20 */
border-top: 1px solid #fcfcfc;
background-color:#3498db;
color: #fff;
font-size:.85em;
width:100px;
text-decoration: none;
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
background-color: #2c81ba;
}
@media only screen and ( max-width: 62.5em ) /* 1000 */
{
#nav
{
width: 100%;
position: static;
margin: 0;
}
}
@media only screen and ( max-width: 40em ) /* 640 */
{
html
{
font-size: 75%; /* 12 */
}
#nav
{
position: relative;
top: auto;
left: auto;
}
#nav > a
{
width: 3.125em; /* 50 */
height: 3.125em; /* 50 */
text-align: left;
text-indent: -9999px;
background-color: #3498db;
position: relative;
}
#nav > a:before,
#nav > a:after
{
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav > a:after
{
top: 60%;
}
#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type
{
display: block;
}
/* first level */
#nav > ul
{
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul
{
display: block;
}
#nav > ul > li
{
width: 100%;
float: none;
}
#nav > ul > li > a
{
height: auto;
text-align: left;
padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a
{
border-right: none;
border-bottom: 1px solid #2c81ba;
font-size: 1em;
}
/* second level */
#nav li ul
{
position: static;
padding: 1.25em; /* 20 */
padding-top: 0;
}
}
</style>
<div style="width:100%; position:fixed;background-color:#3498DB;top:0;left:0;z-index:1000000; height:47px; font-size:14px!important; font-family: "Open Sans", Helvetica, Arial, sans-serif;">
<div>
<a href="https://www.easyaccom.com" style="
padding-left: 100px;
"><img src="https://www.easyaccom.com/images/logo.png" border="0"></a>
<nav id="nav" role="navigation" class="mainheader listingupdatetop">
<a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul class="clearfix listclear1 listupdate">
<li><a href="https://www.easyaccom.com/listing.php" class="listspace listspace1"><i class="fa fa-home"></i> List Your Space</a> </li><li><div class="btn-group listcurpos1" style="position:relative;float:left;margin-right:10px">
<select style="width: 80px;border: #090 1px solid;margin-top: 6px;" class="listcur listcurpad1" id="currencychanger">
<option style="margin:0px;padding:0px;width:100%;text-align:left" >INR</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >USD</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >EUR</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >GBP</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >AUD</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >CAD</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >HKD</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >JPY</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >MYR</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >NZD</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >SGD</option>
<option style="margin:0px;padding:0px;width:100%;text-align:left" >THB</option>
</select>
</div></li>
[var.loggedin; if [val] == '1'; then '<li> <a href="" aria-haspopup="true"><span><img src=[var.userpic;htmlconv=no;noerr] class="userpicimg listingpic" style="width: 40px;border: #446db2 solid 1px;border-radius: 10%;"> [var.userdetails.user_firstname;noerr]</span></a> <ul class="listingtab"> <li><a href="http://www.easyaccom.com/dashboard/index.php">Dashboard</a></li> <li><a href="http://www.easyaccom.com/dashboard/profile.php">Profile</a></li> <li><a href="http://www.easyaccom.com/help.php">Help</a></li> <li><a href="http://www.easyaccom.com/logout.php">Logout</a></li></ul></li>'; else '<li> <a href="http://www.easyaccom.com/login.php">Log In</a> </li><li><a href="http://www.easyaccom.com/login.php">Sign Up</a></li>';noerr]
</ul>
</nav>
</div>
</div>
==================
任何帮助将不胜感激。
感谢。