【发布时间】：2017-02-24 11:44:45
【问题描述】：
我正在开发我的朋友网站以使其适合移动设备。他不希望新网站只是为了限制移动用户使用的网站的某些元素。所以，我在 CSS 中添加了一个媒体查询。
到目前为止的问题是：当我在手机上查看此站点时，内容不适合视口，我必须滚动（从左到右）才能查看完整站点。我不知道如何操作正确的“最大宽度”属性以使所有内容都适合移动设备。
这是我开始草稿的代码笔的链接： http://codepen.io/twesh/pen/RpwxLR?editors=1100
我很乐意澄清任何事情，感谢所有帮助。
谢谢， 特韦斯
body {
background:black;
margin: 0;
padding: 0;
overflow-x:hidden;
}
html{
margin: 0;
padding: 0;
}
a {
color: #FFFF00;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
h1 img {
display: block;
}
img {
border: 0;
overflow-x:scroll;
}
h1 {
color: #FDE7C2;
background: #991111;
border: 2px solid #C4B888;
padding: 8px;
text-align: center;
font: 25px "Times new roman", sans-serif;
font-style: italic;
font-weight: normal;
margin: 0 0 2px 21px;
}
#wrap {
background:#25383C;
float: center;
margin: auto;
}
#topbar {
width: 99%;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
float: center;
font-family:helvetica, arial, sans-serif;
font-size:14px;
color:#FFFFFF;
}
#header {
height: auto;
width: 99%;
background: #800517;
float: center;
}
/**************** menu coding *****************/
#menu {
margin: 0px 0px 0px 12em;
background:#800517;
background-repeat:no-repeat;
float: center;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 7.5em;
float: left;
}
#menu a, #menu h2 {
font: bold 10px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
margin: 0;
padding: 2px 3px;
float: center;
text-align: center;
}
#menu h2 {
color: #260403;
text-transform: uppercase;
}
#menu a {
color: #FFF;
white-space:nowrap;
background-image:url(/assets/nav.gif);
text-decoration: none;
float: center;
}
#menu a:hover {
color: #a00;
background: #fff;
float: center;
}
#menu li {position: relative;}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
<!--[if IE]>
#menu ul li {float: center; width: 100%;}
<![endif]-->
<!--[if lt IE 7]>
body {
background: repeat-y;
clear: both;
width: 100%;
font-size: 100%;
float: center;
}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold italic 1.1em/1.2em Times New Roman, helvetica, arial, sans-serif;
}
<![endif]-->
#topbar {
width: 99%;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
float: center;
font-family:helvetica, arial, sans-serif;
font-size:14px;
color:#FFFFFF;
}
#homebody {
height: auto;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
color:#151B54;
float: center;
}
h2 {
margin: 0px;
padding: 0px 0px 10px 0px;
font:helvetica, arial, sans-serif;
font-size:20px;
font-style:italic;
color:#FFFFFF;
}
h2 b{
color:#FFFF00;
}
.textl{
font-family:helvetica, arial, sans-serif;
font-size:14px;
color:#FFFFFF;
line-height:18px;
padding-right:15px;
font-weight:normal;
text-decoration:none;
text-align:left;
}
.textr{
font-family:helvetica, arial, sans-serif;
font-size:14px;
color:#FFFFFF;
line-height:18px;
padding-right:15px;
font-weight:normal;
text-decoration:none;
text-align:right;
}
.textc{
font-family:helvetica, arial, sans-serif;
font-size:14px;
color:#FFFFFF;
line-height:18px;
padding-right:15px;
font-weight:normal;
text-decoration:none;
text-align:center;
}
.textj{
font-family:helvetica, arial, sans-serif;
font-size:14px;
color:#FFFFFF;
line-height:18px;
padding-right:15px;
font-weight:normal;
text-decoration:none;
text-align:justify;
}
#botline {
height: 16px;
width: 99%;
margin: 0px 10px 0px 10px;
float: center;
}
#footer {
clear:both;
text-align:center;
float: center;
}
#copyright {
clear:both;
margin:0 auto;
float: center;
}
@media screen and (max-width: 1099px) {
@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans+Condensed:300');
html{
background-color:white;
padding: 0;
margin: auto;
}
td{
max-width: auto;
margin: auto;
border: 3px solid #73AD21;
}
body{
font-family: 'Fjalla One', sans-serif;
float:left;
max-width:100%;
color:black;
}
#topbar{
display:none;
}
#menu{
margin: 0 auto;
width: auto;
background: transparent;
padding: 20px;
color: white;
position:fixed;
}
#menu ul:nth-child(1) {
margin: auto;
width: 50%;
padding: 10px;
}
#menu ul:nth-child(5) {
margin: auto;
width: 50%;
padding: 10px;
position:relative;
left:8em;
top:-4.4em;
}
#menu ul:nth-child(7) {
margin: auto;
width: 50%;
padding: 10px;
position:relative;
left:16em;
top:-8.5em;
}
#menu ul:nth-child(2){
display:none;
}
#menu ul:nth-child(3){
display:none;
}
#menu ul:nth-child(4){
display:none;
}
#menu ul:nth-child(6){
display:none;
}
#homebody .textj td[width="40%"] {
display: none;
}
#kaliPujainCT{
margin: auto auto;
max-width: 100%;
background: ;
padding: 0px;
color: white;
}
}<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="bengali, bangla, naska, NASKA, kalipuja, connecticut, india, kali puja, kali puja in connecticut" />
<meta name="description" content="Kali puja in connecticut" />
<title>Welcome to NASKA</title>
<link rel="stylesheet" href="/includes/style_1024.css" type="text/css" />
<script type="text/javascript">
if (screen.width > 1024)
link = document.getElementsByTagName( "link" )[ 0 ];
link.href = "/includes/style_1268.css";
function expandCollapse()
{
for (var i=0; i<expandCollapse.arguments.length; i++)
{
var element = document.getElementById(expandCollapse.arguments[i]);
element.style.display = (element.style.display == "none") ? "block" : "none";
}
}
</script>
<script language="JavaScript1.1">
var slideimages=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
</script>
<script type="text/javascript">
var fb_param = {};
fb_param.pixel_id = '6012379506235';
fb_param.value = '0.00';
fb_param.currency = 'USD';
(function(){
var fpw = document.createElement('script');
fpw.async = true;
fpw.src = '//connect.facebook.net/en_US/fp.js';
var ref = document.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(fpw, ref);
})();
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/offsite_event.php?id=6012379506235&value=0&currency=USD" />
</noscript>
</head>
<body>
<div id="topbar" class="textc">
<img height=65px src="/assets/banner.jpg" width="100%" >
<strong>A non-profit 501(c)(3) Tax Exempt Organization incorporated in the state of Connecticut</strong>
<area shape="rect" coords="0,0,150,150" href="/admin.php">
</div>
<div id="menu">
<ul>
<li><a href="/index.php">Home<br> </a></li>
</ul>
<ul>
<li><a href="#">About<br>Us<img src="/assets/menudown.png"></a>
<ul>
<li><a href="/about.php">About<br>Us</a>
<li><a href="/sponsors.php">Sponsors<img src="/assets/menudown.png"></a>
<ul>
<li><a href="/spnsr2016.php">2016</a></li>
<li><a href="/spnsr2015.php">2015</a></li>
<li><a href="/spnsr2014.php">2014</a></li>
<li><a href="/spnsr2013.php">2013</a></li>
<li><a href="/spnsr2012.php">2012</a></li>
<li><a href="/spnsr2011.php">2011</a></li>
<li><a href="/spnsr2010.php">2010</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Feedback<br> <img src="/assets/menudown.png"></a>
<ul>
<li><a href="/fb2010.php">Send Feedback</a></li>
<li><a href="/fbview.php">View Feedback</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">News<br>Highlights<img src="/assets/menudown.png"></a>
<ul>
<li><a href="/news.php">Newsflash</a></li>
<li><a href="#">Highlights<img src="/assets/menudown.png"></a>
<ul>
<li><a href="/hlt2016.php">2016</a></li>
<li><a href="/hlt2015.php">2015</a></li>
<li><a href="/hlt2014.php">2014</a></li>
<li><a href="/hlt2013.php">2013</a></li>
<li><a href="/hlt2012.php">2012</a></li>
<li><a href="/hlt2011.php">2011</a></li>
<li><a href="/hlt2010.php">2010</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Gallery<br> <img src="/assets/menudown.png"></a>
<ul>
<li><a href="#">Programs<img src="/assets/menudown.png"></a>
<ul>
<li><a href="/glry2015.php">2015</a></li>
<li><a href="/glry2014.php">2014</a></li>
<li><a href="/glry2013.php">2013</a></li>
<li><a href="#">2012<img src="/assets/menudown.png"></a>
<ul>
<li><a href="/glry2012.php">Kalipuja</a></li>
<li><a href="/glryqz2012.php">NASKA Quiz</a></li>
</ul>
</li>
<li><a href="/glry2011.php">2011</a></li>
<li><a href="/glry2010.php">2010</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Dignitaries'<br>Messages<img src="/assets/menudown.png"></a>
<ul>
<li><a href="#">2015<img src="/assets/menudown.png"></a>
<ul>
<li><a href="/wh2015.php">White House</a></li>
<li><a href="/cgny2015.php">Consul General<br>of India</a></li>
<li><a href="/govct2015.php">Governor of CT</a></li>
</ul>
</li>
<li><a href="#">2014<img src="/assets/menudown.png"></a>
<ul>
<li><a href="/cgny2014.php">Consul General<br>of India</a></li>
<li><a href="/govct2014.php">Governor of CT</a></li>
</ul>
</li>
<li><a href="#">2013<img src="/assets/menudown.png"></a>
<ul>
<li><a href="/cgny2013.php">Consul General<br>of India</a></li>
<li><a href="/govct2013.php">Governor of CT</a></li>
</ul>
</li>
<li><a href="#">2012<img src="/assets/menudown.png"></a>
<ul>
<li><a href="/cgny2012.php">Consul General<br>of India</a></li>
<li><a href="/govct2012.php">Governor of CT</a></li>
</ul>
</li>
<li><a href="#">2011<img src="/assets/menudown.png"></a>
<ul>
<li><a href="/cgny2011.php">Consul General<br>of India</a></li>
<li><a href="/govct2011.php">Governor of CT</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="/contact.php">Contact<br>Us</a></li>
</ul>
</div>
<br><br><br>
<div id="topbar">
<marquee behavior=alternate>
<strong>
<br>
</strong>
</marquee>
</div>
<div id="homebody">
<p class="textc">
<font size="4" color="#52F3FF">
<br>
</font>
</p>
<p class="textj">
<table class="textj" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="center" colspan=4>
</td>
</tr>
<tr>
<td>
</td>
<td id="kaliPujainCT" align="left" valign="top" bgcolor=#003300>
<p class="textc">
<font size="4" color="#FFA500">
<strong>Kalipuja in Connecticut</strong>
</font>
</p>
</td>
<td>
<p class="textc">
</p>
</td>
<td id="event" valign="top" align="center" width="40%" bgcolor=#003300>
<p class="textc">
<font size="4" color="#FFA500">
<strong>Event</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="10%" rowspan=3>
<br>
</td>
<td align="center" valign="top">
<br>
<img width = 500 src="/assets/maa/01.jpg" name="slide" border=0></a>
<script>
slideshowimages("/assets/maa/01.jpg"
,"/assets/maa/02.jpg"
,"/assets/maa/03.jpg"
,"/assets/maa/04.jpg"
,"/assets/maa/05.jpg"
)
var slideshowspeed=3500
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
</script>
</font>
<br>
We'd be delighted to hear back from you. Please share your views/opinions using the link below.
<br>
<a href="/fb2010.php"><img src="/assets/Feedback_Off.png" onmouseover="this.src='/assets/Feedback_On.png';" onmouseout="this.src='/assets/Feedback_Off.png'; "/></a>
<br>
<br>
<br>
<font size="5" color="#FF4600">
<strong>Feedback Received</strong>
</font>
<p class="textl">
<img src="/assets/maa/jb.png">Mahua and I thoroughly enjoyed Kali Puja festivities 2014. It was clear to us that every detail was addressed with tender loving care so that such a huge undertaking could run so seamlessly. It did not happen by chance! It was a big task and NASKA organizers came through wonderfully. The food was great and plentiful.
<br><br>
The souvenir magazine looks and reads just great ... fantastic layout ... fantastic literary and artistic pieces. My special thanks to Animesh for editing the souvenir again this year. He always does a super job of editing. I remain grateful.
<br><br>
The musical program was delightful ... Mahua and I especially liked Kinjal's performance ... so young and yet Kinjal could carry the big audience. He has a great future ahead as long as he stays humble.
<br><br>
In the end, let me congratulate all office-bearers of NASKA for their selfless dedication and love. In everything NASKA does, that genuine dedication and love show!
<br>
</p>
<p class="textr">
<a href="/fbview.php">More >></a>
</p>
<a href="https://www.yelp.com/biz/amba-vilas-palace-danbury/" target=_blank><img align="left" width="300" src="/assets/amba.gif"></a>
<a href="http://www.zaroka.com/" target=_blank><img align="right" width="300" src="/assets/zaroka_adh.gif"></a>
</p>
</td>
<td>
</td>
<td id="event2" valign="top" align="center" width="40%">
<br>
<font size="10" color="#FFA500">
<a href="/hlt2016.php"><strong>Kalipuja 2016</strong></a>
</font>
<br><br>
Please click on the above link for more details
<br><br>
Thank you all for attending Kalipuja 2016
<br><br>
Hope to see you in 2017 Kalipuja
<br>
</td>
</tr>
<tr>
<td bgcolor=#003300>
<p class="textc">
<font size="4" color="#FFA500">
<strong>Welcome</strong>
</font>
</p>
</td>
<td>
<p class="textc">
</p>
</td>
<td id="newsAndEvents" valign="top" align="center" width="40%" bgcolor=#003300>
<p class="textc">
<font size="4" color="#FFA500">
<strong>News and Events </strong>
</p>
</td>
</tr>
<td valign="top" align="center" width="50%">
<p class="textl">
NASKA, a charitable, tax-exempt, 501(c)(3) organization, is dedicated to promote cultural diversity,
to participate in educational activity and to contribute to humanitarian cause.
<br>
We are committed to sharing South Asian heritage with everyone in North America.
<br>
We embrace diversity and inclusion by inviting people from all walks of life to our social events.
<br><br>
</p>
<img align="left" src="/assets/maa/pradeep.jpg"><img align="right" src="/assets/maa/offer.jpg">
<br><br>
<a href="http://www.crsgh.com/" target=_blank><img align="center" width="200" src="/assets/crs.jpg"></a>
</td>
<td>
<p class="textc">
</p>
</td>
<td id="newsAndEvents2" valign="top" align="center" width="40%">
<p class="textl">
<img src="/assets/maa/jb.png">NASKA General Body meeting on 06/25/2016 <br><a href="/assets/docs/MOM_2016_06_25.pdf" target="_blank">(Download Minutes)</a> <br>
<img src="/assets/maa/jb.png">NASKA General Body meeting on 02/27/2016 <br><a href="/assets/docs/MOM_2016_02_27.pdf" target="_blank">(Download Minutes)</a> <br>
<img src="/assets/maa/jb.png">More than 550 devotees attended Kalipuja 2015.
<br>
<img src="/assets/maa/jb.png">Debojit Saha will rock the NASKA audience this year (2015). <br>
<img src="/assets/maa/jb.png">NASKA General Body meeting on 03/14/2015 <br><a href="/assets/docs/MoM_2015_03_14.pdf" target="_blank">(Download Minutes)</a> <br>
</p>
<p class="textr">
<a href="/news.php">More >></a>
</p>
</td>
</tr>
</table>
</p>
</div>
<div id="footer">
<table align="left" width=100% border="0">
<tr>
<td colspan=3 align="center">
</td>
</tr>
<tr>
<td align="left">
<a
href="http://www.facebook.com//n/?group.php&gid=389071392384&mid=ebaa21e19aabde2f7a3fa23a140
8ea0f" target="_blank">
<img width="30" height="30" src="/assets/facebook.png" alt="Join us on
Facebook"/>
</a>
<a href="http://www.twitter.com/naskact" target="_blank">
<img width="30" height="30"
src="http://twitter-badges.s3.amazonaws.com/t_logo-a.png" alt="Follow NASKA on Twitter"/>
</a>
<a href="http://www.orkut.com/Main#Community?rl=cpp&cmm=99586925"
target="_blank">
<img width="30" height="30" src="/assets/orkut.png" alt="Join our Community in
Orkut"/>
</a>
</td>
<td align="center">
</td>
<td align="right">
</td>
</tr>
</table>
</div>
<div id="copyright">
<p class="textc"><strong>© 2010 www.naska.org. All right reserved.
<br>123481 visits so far</strong></p>
</div>
</body>
</html>【问题讨论】：
标签： css