Android Mobile

时间：2016-05-01 21:58:56

标签： android html css

我刚刚创建了一个在计算机上完美运行的网站，但在移动设备中

.news {
	position:relative;
	width:100%;
	height:300px;
	background-color:rgba(255,255,255,0.8);
	top:550px;
}

.news-content {
	width:1000px;
	height:300px;
	margin:0 auto;
}

.news-content table {
	table-layout:fixed;
	width:100%;
	height:100%;
	
}

.news-content td {
	width:25%;
	max-width:25%;
	height:100%;
	text-align:center;
	white-space:pre-line;
	border-left:1px solid black;
	border-right:1px solid black;
	text-decoration:none;
	font-weight:bold;
}

.news-content h2 {
	margin:0;
	padding:0;
}

.news-content a {
	text-decoration:none;
	display:block;
	width:100%;
	height:100%;
	color:black;
}

.news-content a:hover {
	background-color:black;
	color:white;
}

问题的图片

enter image description here 它有一个完美的100％的菜单，但他是固定的，其他我不能修复。页脚和中间是剪切，我不明白为什么...... 

body {
	margin:0;
	padding:0;
	background-image:url("fundo.png");
	background-attachment:fixed;
	background-size:100%;
	width:100%;
	height:1000px;
	overflow-x:hidden;
}

.menu {
	width:100%; 
	height:80px;
	background-color:rgba(0,0,0,0.8);
	position:fixed;
	z-index:1000;
}

.menu-content {
	width:1000px; 
	height:80px; 
	margin:0 auto;
	text-align:center;	
}

.menu ul {
	list-style:none;
	padding:0;
	margin:0;
}

.menu li {
	display:inline-block;
	vertical-align:middle;
	position:relative;
	margin:5px 5px 0 5px;
}

.menu a {
	text-decoration:none;
	color:white;
	display:block;
	font-size:20px;
}

.menu li ul {
	position:absolute;
	display:none;
	margin:0;
	padding:0;
}

.menu li ul li{
	width:100%;
	width:150px;
	height:30px;
	margin:0px;
	background-color:black;
}

.menu li:hover ul {
	display:block;
}

.menu li:hover{
	background-color:rgba(255,255,255,1);
	color:black;
}

.menu ul li:hover > a{
	color:black;
}


.footer {
	position:relative;
	top:1000px;
	height:80px;
	width:100%;
	background-color:rgba(0,0,0,0.8);
}

.footer-content {
	width:1100px; 
	height:80px; 
	margin:0 auto;
	text-align:center;
}

.footer-content p {
	position:relative;
	text-decoration:none;
	color:white;
	opacity:0.4;
	font-family:Lucida Console;
	font-size:50px;
	margin:0;
	padding:0;
	top:20px;
	z-index:10;
}

.footer-content a {
	text-decoration:none;
}

.footer-content img {
	z-index:100;
}

.footer-content p:hover {
	opacity:1;
}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="height:100%" />
<html>
<head>
<title>CCSOL | Sinta a Energia</title>

<link rel="stylesheet" type="text/css" href="estilo.css">
<link rel="stylesheet" type="text/css" href="estilo-news.css">

</head>
<body>

	<div class="menu">
	
		<div class="menu-content">
			
			<ul class="dropdown">
				<li style="width:150px; height:30px;"><a href="empresa.html">A Empresa</a>
					<ul>
						<li><a href="quemsomos.html">Quem Somos</a></li>
						<li><a href="nossaresponsabilidade.html" style="font-size:14px;">Nossa Responsabilidade</a></li>
					</ul>
				</li>
				<li style="width:150px; height:30px;"><a href="ledsolar.html">LED Solar</a>
					<ul>
						<li><a href="8w.html">8W</a></li>
						<li><a href="12w.html">12W</a></li>
						<li><a href="15w.html">15W</a></li>
						<li><a href="18w.html">18W</a></li>
						<li><a href="20w.html">20W</a></li>
						<li><a href="25w.html">25W</a></li>
						<li><a href="30w.html">30W</a></li>
						<li><a href="40w.html">40W</a></li>
						<li><a href="50w.html">50W</a></li>
						<li><a href="60w.html">60W</a></li>
						<li><a href="70w.html">70W</a></li>
						<li><a href="80w.html">80W</a></li>
					</ul>
				</li>
				<li><a href="index.html"><img src="logo.png" alt="CCSOL" style="height:80%;" ></a></li>
				<li style="width:150px; height:30px;"><a href="fotovoltaico.html">Fotovoltaico</a>
					<ul>
						<li><a href="fvt.html">FVT</a></li>
						<li><a href="vidrovidro.html">Vidro - Vidro</a></li>
						<li><a href="fv.html">FV</a></li>
					</ul>
				</li>
				<li style="width:150px; height:30px;"><a href="contato.html">Contato</a></li>
			</ul>

			<a href="index.html"><img src="brasil.png" class="logo" alt="Português" style="position:absolute; top:10px; left:10px;"></a>
			<a href="indexen.html"><img src="usa.png" class="logo" alt="English" style="position:absolute; top:10px; left:35px;"></a>			

		</div>
	</div>
	
	<div class="news">
		<div class="news-content">
			<table>
				<tr>
					<td><a href="news1.html">
					<h2>Noticia 1</h2>
					
					aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
					aaaaaaaaaaaaaaaaaaaaaa
					asahsuahdsuadhaudhuofhoahiosajf
					ahudhasuishfuihdaiofhadoiadadsf
					fdfaffsdgsdfsfasdasf
					sdfdfasdfsadasfsdfdfadfas
					fddfafsafdfsdfasdfasfasfsdfdgas
					dsfafasdfdafasfadfdgs
					</a></td>
					<td><a href="news2.html">
					<h2>Noticia 2</h2>
					
					</a></td>
					<td><a href="news3.html">
					<h2>Noticia 3</h2>
					
					</a></td>
					<td><a href="news4.html">
					<h2>Noticia 4</h2>
					
					</a></td>
				</tr>
			</table>
		</div>
	</div>
	
	<div class="footer">
		<div class="footer-content">
		<a href="https://www.facebook.com/ccsoltec/?fref=ts" target="_blank"><img src="face-icon.png" alt="Facebook CCSOL" style="position:relative; float:right; top:10px; right:200px; height:40px;"></a>
		<a href="index.html"><p>Sinta a Energia!</p></a>
		</div>
	</div>
	
	
</body>
</html>

我已经尝试过100vw，我已经尝试过了 <meta name="viewport" content="width=device-width, initial-scale=1.0">但是没有效果......

有2个css，一个用于新闻，另一个用于所有其他具有菜单和页脚的页面......

有人可以帮我解决这个问题吗？它杀了我不明白为什么android欺负我......

1 个答案:

答案 0 :(得分：0)

使用封面

为响应式背景图像执行此操作 

body {
	margin:0;
	padding:0;
	background: url(fundo.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
}

相关问题
最新问题