CSS 布局不适用于移动设备

Question

我的模板在我的桌面上看起来很像我想要的样子，但是当我将它加载到我的 phone 中的任一视图时，左侧的导航不会像页面的其余部分那样调整大小以适合做。您可以在 http://www.mytournamentonline.com/work/template3.php.

查看布局

如有任何帮助，我将不胜感激。 css 中的一些项目可能是多余的，但我虽然 tit 正在工作，但我意识到它在我的 phone 上显示不正确，所以我尝试了各种更新以使其正常工作。

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

Answer 1

使用媒体查询来控制移动视图。从 #container 集 width:100% 开始。在您的 Html 中，我建议将 sidebar div 移动到 content div 上方，然后交换浮点数。

此外，我建议在所有 #container > div 上设置 width:100%。

调查 bootstrap link here

Answer 2

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

试试下面的代码。

<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <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;
}
 
 @media screen and (max-width:680px) {
  #sidebar {
    float:none;
    width:100%;display: block;
 }
  #content {
    float:none;
    width:100%;
 }

 }
</style>
</head>
<body>
<div id="container">
<div id="header">
    <img src="http://www.mytournamentonline.com/work/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></html>

Answer 3

您可以像下面这样使用媒体查询

@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{
}

如果宽度小于 768px 那么你可以使用上面的媒体查询。

CSS 布局不适用于移动设备

CSS Layout not working on mobile device

html

css

responsive