CSS布局不适用于移动设备 [英] CSS Layout not working on mobile device

查看：112
本文介绍了CSS布局不适用于移动设备的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的模板看起来与我在桌面上需要的方式非常相似，但是当我在任一视图中将其加载到手机上时，左侧的导航不会调整大小以适应页面的其他部分。您可以在 http://www.mytournamentonline.com/work/template3.php 。



我将不胜感激任何帮助。一些CSS项目可能是多余的，但我虽然山雀工作，然后意识到它没有正确显示在我的手机上，所以我已经尝试各种更新，以使其工作。

 < style> 
 body {
 background-color：＃666; 
 font-family：Geneva，Arial，Helvetica，sans-serif; 
 font-size：12px; 
颜色：＃000000; 
} 
 
 #container {
 width：80％; 
 margin：0 auto; 
背景颜色：＃12295d; 
 border：5px solid＃a6c250; 
} 
 
 #header img {
 width：100％; 
 margin：auto; 
 height：auto; 
} 
 
 #content {
 float：right; 
宽度：81％; 
背景颜色：#FFFFFF; 
 border-left：5px solid＃a6c250; 
 min-height：350px; 
} 
 
 #sidebar {
 float：left; 
宽度：18％; 
} 
 
 #primary {
 float：left; 
宽度：98％; 
背景颜色：＃245192; 
 border-top：0; 
} 
 
 / * nav * / 
 nav {
 background-color：＃245192; 
宽度：100％; 
 float：left; 
 height：inherit; 
} 
 
 / *导航按钮样式* / 
 a.btn {
 display：block; 
宽度：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（线性，左上方，左下方，颜色停止（0，＃98ba40），停止颜色（.35，＃a6c250），停止颜色（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（线性，左上方，左下方，颜色停止（0，＃245192），停止颜色（.75，＃1e3b73），停止颜色（1，＃12295d）） ; 
 border：1px solid＃0f2557; 
} 
 
 .currentpage {
 display：block; 
宽度：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（线性，左上方，左下方，颜色停止（0，＃245192），停止颜色（.75，＃1e3b73），停止颜色（1，＃12295d）） ; 
 border：1px solid＃0f2557; 
} 
 #footer {
 clear：both; 
明确：两者; 
 text-align：center; 
宽度：100 $; 
 font-family：Geneva，Arial，Helvetica，sans-serif; 
 font-size：10px; 
 font-weight：bold; 
颜色：＃DCF414; 
 border-top：5px solid＃a6c250; 
背景颜色：＃12295d; 
} 
< / style> 
 
< body> 
< div id =container> 
< div id =header> 
< img src =images / New_header_700_150.jpgalt =我的Tournamentonline标题/> 
< / div> 
 
< div id =content> 
< div style =padding：10px;> 
< p>主要内容< / p> 
< / div> 
< / div> 
 
< div id =sidebar> 
< div id =primary> 
< nav> 
函数curPageName（）{
返回substr（$ _ SERVER [SCRIPT_NAME]，strrpos（$ _ SERVER [SCRIPT_NAME]，/）+ 1）; 
} 
？> 
< a href =index.phpclass =<？php if（curPageName（）=='index.php'）{？> currentpage<？php} ELSE {？> btn<？php}？>>主页< / a> 
 < a href =club_reg.phpclass =<？php if（curPageName（）=='club_reg.php'）{？> currentpage<？php} ELSE {？> btn<？php}？>>俱乐部注册< / a> 
< a href =login.phpclass =<？php if（curPageName（）=='login.php'）{？> currentpage<？php} ELSE {？> btn<？php}？>>会员登录< / a> 
< a href =contactUs.phpclass =<？php if（curPageName（）=='contactUs.php'）{？> currentpage<？php} ELSE {？> btn<？php}？>>与我们联系< / a> 
< / nav> 
< / div> 
< / div> 
 
< div id =footer> 
< p>页脚< / p> 
< / div> 
< / div> 
< / body>


解决方案

您可以使用媒体查询来满足您的需求。您还可以更改一些布局以填充移动设备。



请尝试下面的代码。

<！DOCTYPE html>< html> < HEAD> < meta name =viewportcontent =width = device-width，initial-scale = 1> <风格> body {background-color：＃666; font-family：Geneva，Arial，Helvetica，sans-serif; font-size：12px;颜色：＃000000;}＃container {width：80％;保证金：0汽车;背景色：＃12295d; border：5px solid＃a6c250;}＃header img {width：100％;保证金：汽车; height：auto;}＃content {float：right;宽度：81％;背景色：#FFFFFF; border-left：5px solid＃a6c250; min-height：350px;}＃sidebar {float：left; width：18％;}＃primary {float：left;宽度：98％;背景色：＃245192; border-top：0;} / * nav * / nav {background-color：＃245192;宽度：100％;向左飘浮; height：inherit;} / *导航按钮样式* / a.btn {display：block;宽度：100％; padding：10px 0px 10px 10px; font-family：Arial; font-size：16px;文字修饰：无;颜色：#ffffff; text-shadow：-1px -1px 2px＃618926;背景：-moz-linear-gradient（＃98ba40，＃a6c250 35％，＃618926）;背景：-webkit-gradient（线性，左上，左下，停止颜色（0，＃98ba40），停止颜色（.35，＃a6c250），停止颜色（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;背景：-moz-linear-gradient（＃245192，＃1e3b73 75％，＃12295d）;背景：-webkit-gradient（线性，左上方，左下方，颜色停止（0，＃245192），停止颜色（.75，＃1e3b73），停止颜色（1，＃12295d））; border：1px solid＃0f2557;}。currentpage {display：block;宽度：100％; padding：10px 0px 10px 10px; font-family：Arial; font-size：1.5em;文字修饰：无;颜色：#ffffff; text-shadow：-1px -1px 2px＃465f97;背景：-moz-linear-gradient（＃245192，＃1e3b73 75％，＃12295d）;背景：-webkit-gradient（线性，左上方，左下方，颜色停止（0，＃245192），停止颜色（.75，＃1e3b73），停止颜色（1，＃12295d））; border：1px solid＃0f2557;}＃footer {clear：both;明确：两者;文本对齐：中心;宽度：$ 100; font-family：Geneva，Arial，Helvetica，sans-serif; font-size：10px; font-weight：bold;颜色：＃DCF414; border-top：5px solid＃a6c250; background-color：＃12295d;} @media screen和（max-width：680px）{#sidebar {float：none;宽度：100％;显示：块; } #content {float：none;宽度：100％; }}< / style>< / head>< body>< div id =container>< div id =header> < img src =http://www.mytournamentonline.com/work/images/New_header_700_150.jpgalt =我的Tournamentonline标题/>< / div>< div id =content> < div style =padding：10px;> < p>主要内容< / 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.phpclass =<？php if（curPageName（）=='index.php'）{？> currentpage<？php} ELSE {？> btn<？php}？>>主页< / a> < a href =tournaments.phpclass =<？php if（curPageName（）=='tournaments.php'）{？> currentpage<？php} ELSE {？> btn<？php}？>> Active Tournaments< / a> < a href =club_reg.phpclass =<？php if（curPageName（）=='club_reg.php'）{？> currentpage<？php} ELSE {？> btn<？php}？>>俱乐部注册< / a> < a href =login.phpclass =<？php if（curPageName（）=='login.php'）{？> currentpage<？php} ELSE {？> btn<？php}？>>会员登录< / a> < a href =contactUs.phpclass =<？php if（curPageName（）=='contactUs.php'）{？> currentpage<？php} ELSE {？> btn<？php}？>>与我们联系< / a> < / NAV> < / div>< / div>< div id =footer> < p为H.页脚< / P>< / DIV>< / DIV>< / BODY>< / HTML>


My template looks pretty much the way I want it on my desktop but when I load it on my phone in either view the navigation on the left side does not resize to fit like the rest of the page does. You can view the layout at http://www.mytournamentonline.com/work/template3.php.

I would appreciate any help. Some of the css items may be redundant but I though tit was working then realized it was not displaying properly on my phone so I've tried all kinds of updates to get it working.

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

解决方案

You can use media query for you requirement. You can also change some layout to fill in the mobile device.

Try the below code. 

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

这篇关于CSS布局不适用于移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆