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

【问题标题】：CSS Layout not working on mobile deviceCSS 布局在移动设备上不起作用
【发布时间】：2017-06-23 12:26:10
【问题描述】：

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

如果有任何帮助，我将不胜感激。一些 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>

【问题讨论】：

欢迎来到 StackOverflow！解决方案完全取决于您希望侧边栏调整移动设备大小的准确程度。你想让它粘在左边吗？往下掉？你能更具体一点吗？您的侧边栏目前低于您的主要内容，因为没有足够的宽度让它位于左侧。这是因为您对两列都使用了基于百分比的widths，但使用了基于像素的padding。您可能想研究像BootStrap 这样的框架，以便在某些断点处自动堆叠相关的列:)
添加一个父类以结合滑块和主要内容并在其上编写样式.. <div class="main"> <div class="slider"> slider content here </div> <div class="content"> main content here .. </div> </div> 和 css 如.main { display: flex; }
还有一件事你必须使用媒体查询进行响应式设计
这个问题应该被关闭，因为提供的标记与指向的网站不匹配。如果网站是实际的标记，那么这不符合当前的网页标记标准。提供的任何 CSS 本质上都是在处理损坏的 HTML。
抱歉，我希望它留在原处，在左侧，如果可能的话，它看起来与在常规浏览器上的外观相同。我还将检查引导程序。谢谢

标签： html css responsive

【解决方案1】：

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

试试下面的代码。

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

【讨论】：

【解决方案2】：

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

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

查看引导程序link here

【讨论】：

【解决方案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{
}

如果宽度低于 768 像素，则可以使用上述媒体查询。

【讨论】：