Html CSS布局在移动设备上不起作用_Html_Css_Responsive

Html CSS布局在移动设备上不起作用

html css

Html CSS布局在移动设备上不起作用,html,css,responsive,Html,Css,Responsive,我的模板在我的桌面上看起来与我想要的差不多，但是当我在手机上的任何一个视图中加载它时，左侧的导航并不会像页面的其他部分那样调整大小以适应。您可以在上查看布局我将感谢任何帮助。一些css项目可能是多余的，但我认为tit正在工作，然后意识到它没有在我的手机上正常显示，所以我尝试了各种更新，以使其工作 <style> body { background-color: #666; font-family: Geneva, Arial, Helvetica,

我的模板在我的桌面上看起来与我想要的差不多，但是当我在手机上的任何一个视图中加载它时，左侧的导航并不会像页面的其他部分那样调整大小以适应。您可以在上查看布局

我将感谢任何帮助。一些css项目可能是多余的，但我认为tit正在工作，然后意识到它没有在我的手机上正常显示，所以我尝试了各种更新，以使其工作

    <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>


身体{
背景色：#666；
字体系列：日内瓦，Arial，Helvetica，无衬线；
字体大小：12px；
颜色：#000000；
}
#容器{
宽度：80%；
保证金：0自动；
背景色：#12295d；
边框：5px实心#a6c250；
}
#收割台img{
宽度：100%；
保证金：自动；
高度：自动；
}
#内容{
浮动：对；
宽度：81%；
背景色：#FFFFFF；
左边框：5px实心#a6c250；
最小高度：350px；
}
#边栏{
浮动：左；
宽度：18%；
}
#初级的{
浮动：左；
宽度：98%；
背景色：#245192；
边界顶部：0；
}
/*导航*/
导航{
背景色：#245192；
宽度：100%；
浮动：左；
身高：继承；
}
/*导航按钮样式*/
a、 btn{
显示：块；
宽度：100%；
填充：10px 0px 10px 10px；
字体系列：Arial；
字体大小：16px；
文字装饰：无；
颜色：#ffffff；
文本阴影：-1px-1px 2px#618926；
背景：-moz线性梯度（#98ba40，#a6c250 35%，#618926）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0，#98ba40）、颜色停止（.35，#a6c250）、颜色停止（1，#618926））；
边框：1px实心#618926；
边界半径：3px；
-moz边界半径：3px；
-webkit边界半径：3px；
}
a、 btn：悬停{
文本阴影：-1px-1px 2px#465f97；
背景：-moz线性梯度（#245192，#1e3b73 75%，#12295d）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0，#245192）、颜色停止（.75，#1e3b73）、颜色停止（1，#12295d））；
边框：1px实心#0f2557；
}
.currentpage{
显示：块；
宽度：100%；
填充：10px 0px 10px 10px；
字体系列：Arial；
字号：1.5em；
文字装饰：无；
颜色：#ffffff；
文本阴影：-1px-1px 2px#465f97；
背景：-moz线性梯度（#245192，#1e3b73 75%，#12295d）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0，#245192）、颜色停止（.75，#1e3b73）、颜色停止（1，#12295d））；
边框：1px实心#0f2557；
}
#页脚{
明确：两者皆有；
明确：两者皆有；
文本对齐：居中；
宽度：100美元；
字体系列：日内瓦，Arial，Helvetica，无衬线；
字体大小：10px；
字体大小：粗体；
颜色：#DCF414；
边框顶部：5px实心#a6c250；
背景色：#12295d；
}
主要内容
页脚

使用媒体查询控制移动视图。从容器开始设置宽度：100%。在Html中，我建议将

侧边栏div

移动到

内容div

上方，然后交换浮动

另外，我建议在所有

#container>div

上设置

width:100%

查看引导

您可以根据需要使用媒体查询。您还可以更改某些布局以填充移动设备

请尝试下面的代码


身体{
背景色：#666；
字体系列：日内瓦，Arial，Helvetica，无衬线；
字体大小：12px；
颜色：#000000；
}
#容器{
宽度：80%；
保证金：0自动；
背景色：#12295d；
边框：5px实心#a6c250；
}
#收割台img{
宽度：100%；
保证金：自动；
高度：自动；
}
#内容{
浮动：对；
宽度：81%；
背景色：#FFFFFF；
左边框：5px实心#a6c250；
最小高度：350px；
}
#边栏{
浮动：左；
宽度：18%；
}
#初级的{
浮动：左；
宽度：98%；
背景色：#245192；
边界顶部：0；
}
/*导航*/
导航{
背景色：#245192；
宽度：100%；
浮动：左；
身高：继承；
}
/*导航按钮样式*/
a、 btn{
显示：块；
宽度：100%；
填充：10px 0px 10px 10px；
字体系列：Arial；
字体大小：16px；
文字装饰：无；
颜色：#ffffff；
文本阴影：-1px-1px 2px#618926；
背景：-moz线性梯度（#98ba40，#a6c250 35%，#618926）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0，#98ba40）、颜色停止（.35，#a6c250）、颜色停止（1，#618926））；
边框：1px实心#618926；
边界半径：3px；
-moz边界半径：3px；
-webkit边界半径：3px；
}
a、 btn：悬停{
文本阴影：-1px-1px 2px#465f97；
背景：-moz线性梯度（#245192，#1e3b73 75%，#12295d）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0，#245192）、颜色停止（.75，#1e3b73）、颜色停止（1，#12295d））；
边框：1px实心#0f2557；
}
.currentpage{
显示：块；
宽度：100%；
填充：10px 0px 10px 10px；
字体系列：Arial；
字号：1.5em；
文字装饰：无；
颜色：#ffffff；
文本阴影：-1px-1px 2px#465f97；
背景：-moz线性梯度（#245192，#1e3b73 75%，#12295d）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0，#245192）、颜色停止（.75，#1e3b73）、颜色停止（1，#12295d））；
边框：1px实心#0f2557；
}
#页脚{
明确：两者皆有；
明确：两者皆有；
文本对齐：居中；
宽度：100美元；
字体系列：日内瓦，Arial，Helvetica，无衬线；
字体大小：10px；
字体大小：粗体；
颜色：#DCF414；
边框顶部：5px实心#a6c250；
背景色：#12295d；
}
@媒体屏幕和屏幕（最大宽度：680px）{
#边栏{
浮动：无；
宽度：100%；显示：块；
}
#内容{
浮动：无；
宽度：100%；
}
}
主要内容
@media only screen and (max-width: 768px) {
/* For mobile phones: */
body {
width: 100%;
}
/* customize the tag, class, id's according to your requirement */
.class{
}
<tag>{
}
#id's{
}