-2
我的模板看起来很像我的桌面上的方式，但是当我在任一视图中将其加载到手机上时，左侧的导航不会调整大小以适合其余部分页面没有。您可以在http://www.mytournamentonline.com/work/template3.php查看布局。CSS布局不适用于移动设备
我将不胜感激任何帮助。一些CSS项目可能是多余的，但我虽然山雀工作，然后意识到它没有正确显示在我的手机上，所以我尝试了各种更新，以使其工作。
<style>
body {
background-color: #666;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#container {
width: 80%;
margin: 0 auto;
background-color:#12295d;
border:5px solid #a6c250;
}
#header img {
width:100%;
margin:auto;
height: auto;
}
#content {
float:right;
width:81%;
background-color:#FFFFFF;
border-left:5px solid #a6c250;
min-height:350px;
}
#sidebar {
float:left;
width:18%;
}
#primary {
float: left;
width: 98%;
background-color:#245192;
border-top: 0;
}
/* nav */
nav {
background-color:#245192;
width:100%;
float:left;
height:inherit;
}
/* navigation button styles */
a.btn {
display: block;
width: 100%;
padding: 10px 0px 10px 10px;
font-family: Arial;
font-size: 16px;
text-decoration: none;
color: #ffffff;
text-shadow: -1px -1px 2px #618926;
background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
border: 1px solid #618926;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
a.btn:hover {
text-shadow: -1px -1px 2px #465f97;
background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
border: 1px solid #0f2557;
}
.currentpage {
display: block;
width: 100%;
padding: 10px 0px 10px 10px;
font-family: Arial;
font-size: 1.5em;
text-decoration: none;
color: #ffffff;
text-shadow: -1px -1px 2px #465f97;
background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
border: 1px solid #0f2557;
}
#footer {
clear:both;
clear: both;
text-align:center;
width:100$;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #DCF414;
border-top: 5px solid #a6c250;
background-color: #12295d;
}
</style>
<body>
<div id="container">
<div id="header">
<img src="images/New_header_700_150.jpg" alt="My Tournamentonline Header" />
</div>
<div id="content">
<div style="padding:10px;">
<p>Main content</p>
</div>
</div>
<div id="sidebar">
<div id="primary">
<nav>
<?php
function curPageName() {
return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}
?>
<a href="index.php" class=<?php if (curPageName() == 'index.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Home</a>
<a href="tournaments.php" class=<?php if (curPageName() == 'tournaments.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Active Tournaments</a>
<a href="club_reg.php" class=<?php if (curPageName() == 'club_reg.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Club Registration</a>
<a href="login.php" class=<?php if (curPageName() == 'login.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Member Login</a>
<a href="contactUs.php" class=<?php if (curPageName() == 'contactUs.php') { ?> "currentpage" <?php } ELSE { ?> "btn" <?php } ?>>Contact Us</a>
</nav>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
欢迎来到StackOverflow！解决方案完全取决于您希望**边栏对手机调整大小的方式。你想把它粘在左边吗？低于？你可以请更具体一点吗？由于没有足够的宽度可以放在左侧，因此您的侧边栏目前正在放在主要内容的下方。这是由于你为两列使用基于百分比的'widths'，而基于像素的'padding'。您可能希望查看像[** BootStrap **]（http://getbootstrap.com）这样的框架，以自动将相关列堆栈放置在某个断点:) –
添加一个父类以将滑块和主要内容以及在其上写入样式..'
还有一件事您必须使用媒体查询进行响应式设计 – bhv