我只是做了一個網站的工作完美的電腦,但手機寬度不是100%在Android手機
.news {
\t position:relative;
\t width:100%;
\t height:300px;
\t background-color:rgba(255,255,255,0.8);
\t top:550px;
}
.news-content {
\t width:1000px;
\t height:300px;
\t margin:0 auto;
}
.news-content table {
\t table-layout:fixed;
\t width:100%;
\t height:100%;
\t
}
.news-content td {
\t width:25%;
\t max-width:25%;
\t height:100%;
\t text-align:center;
\t white-space:pre-line;
\t border-left:1px solid black;
\t border-right:1px solid black;
\t text-decoration:none;
\t font-weight:bold;
}
.news-content h2 {
\t margin:0;
\t padding:0;
}
.news-content a {
\t text-decoration:none;
\t display:block;
\t width:100%;
\t height:100%;
\t color:black;
}
.news-content a:hover {
\t background-color:black;
\t color:white;
}
問題
它的圖片一個完美的菜單,100%,但他是固定的,其他我不能修復。頁腳和中間被切斷,我無法找出原因...
body {
\t margin:0;
\t padding:0;
\t background-image:url("fundo.png");
\t background-attachment:fixed;
\t background-size:100%;
\t width:100%;
\t height:1000px;
\t overflow-x:hidden;
}
.menu {
\t width:100%;
\t height:80px;
\t background-color:rgba(0,0,0,0.8);
\t position:fixed;
\t z-index:1000;
}
.menu-content {
\t width:1000px;
\t height:80px;
\t margin:0 auto;
\t text-align:center; \t
}
.menu ul {
\t list-style:none;
\t padding:0;
\t margin:0;
}
.menu li {
\t display:inline-block;
\t vertical-align:middle;
\t position:relative;
\t margin:5px 5px 0 5px;
}
.menu a {
\t text-decoration:none;
\t color:white;
\t display:block;
\t font-size:20px;
}
.menu li ul {
\t position:absolute;
\t display:none;
\t margin:0;
\t padding:0;
}
.menu li ul li{
\t width:100%;
\t width:150px;
\t height:30px;
\t margin:0px;
\t background-color:black;
}
.menu li:hover ul {
\t display:block;
}
.menu li:hover{
\t background-color:rgba(255,255,255,1);
\t color:black;
}
.menu ul li:hover > a{
\t color:black;
}
.footer {
\t position:relative;
\t top:1000px;
\t height:80px;
\t width:100%;
\t background-color:rgba(0,0,0,0.8);
}
.footer-content {
\t width:1100px;
\t height:80px;
\t margin:0 auto;
\t text-align:center;
}
.footer-content p {
\t position:relative;
\t text-decoration:none;
\t color:white;
\t opacity:0.4;
\t font-family:Lucida Console;
\t font-size:50px;
\t margin:0;
\t padding:0;
\t top:20px;
\t z-index:10;
}
.footer-content a {
\t text-decoration:none;
}
.footer-content img {
\t z-index:100;
}
.footer-content p:hover {
\t 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>
\t <div class="menu">
\t
\t \t <div class="menu-content">
\t \t \t
\t \t \t <ul class="dropdown">
\t \t \t \t <li style="width:150px; height:30px;"><a href="empresa.html">A Empresa</a>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="quemsomos.html">Quem Somos</a></li>
\t \t \t \t \t \t <li><a href="nossaresponsabilidade.html" style="font-size:14px;">Nossa Responsabilidade</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </li>
\t \t \t \t <li style="width:150px; height:30px;"><a href="ledsolar.html">LED Solar</a>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="8w.html">8W</a></li>
\t \t \t \t \t \t <li><a href="12w.html">12W</a></li>
\t \t \t \t \t \t <li><a href="15w.html">15W</a></li>
\t \t \t \t \t \t <li><a href="18w.html">18W</a></li>
\t \t \t \t \t \t <li><a href="20w.html">20W</a></li>
\t \t \t \t \t \t <li><a href="25w.html">25W</a></li>
\t \t \t \t \t \t <li><a href="30w.html">30W</a></li>
\t \t \t \t \t \t <li><a href="40w.html">40W</a></li>
\t \t \t \t \t \t <li><a href="50w.html">50W</a></li>
\t \t \t \t \t \t <li><a href="60w.html">60W</a></li>
\t \t \t \t \t \t <li><a href="70w.html">70W</a></li>
\t \t \t \t \t \t <li><a href="80w.html">80W</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </li>
\t \t \t \t <li><a href="index.html"><img src="logo.png" alt="CCSOL" style="height:80%;" ></a></li>
\t \t \t \t <li style="width:150px; height:30px;"><a href="fotovoltaico.html">Fotovoltaico</a>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="fvt.html">FVT</a></li>
\t \t \t \t \t \t <li><a href="vidrovidro.html">Vidro - Vidro</a></li>
\t \t \t \t \t \t <li><a href="fv.html">FV</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </li>
\t \t \t \t <li style="width:150px; height:30px;"><a href="contato.html">Contato</a></li>
\t \t \t </ul>
\t \t \t <a href="index.html"><img src="brasil.png" class="logo" alt="Português" style="position:absolute; top:10px; left:10px;"></a>
\t \t \t <a href="indexen.html"><img src="usa.png" class="logo" alt="English" style="position:absolute; top:10px; left:35px;"></a> \t \t \t
\t \t </div>
\t </div>
\t
\t <div class="news">
\t \t <div class="news-content">
\t \t \t <table>
\t \t \t \t <tr>
\t \t \t \t \t <td><a href="news1.html">
\t \t \t \t \t <h2>Noticia 1</h2>
\t \t \t \t \t
\t \t \t \t \t aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
\t \t \t \t \t aaaaaaaaaaaaaaaaaaaaaa
\t \t \t \t \t asahsuahdsuadhaudhuofhoahiosajf
\t \t \t \t \t ahudhasuishfuihdaiofhadoiadadsf
\t \t \t \t \t fdfaffsdgsdfsfasdasf
\t \t \t \t \t sdfdfasdfsadasfsdfdfadfas
\t \t \t \t \t fddfafsafdfsdfasdfasfasfsdfdgas
\t \t \t \t \t dsfafasdfdafasfadfdgs
\t \t \t \t \t </a></td>
\t \t \t \t \t <td><a href="news2.html">
\t \t \t \t \t <h2>Noticia 2</h2>
\t \t \t \t \t
\t \t \t \t \t </a></td>
\t \t \t \t \t <td><a href="news3.html">
\t \t \t \t \t <h2>Noticia 3</h2>
\t \t \t \t \t
\t \t \t \t \t </a></td>
\t \t \t \t \t <td><a href="news4.html">
\t \t \t \t \t <h2>Noticia 4</h2>
\t \t \t \t \t
\t \t \t \t \t </a></td>
\t \t \t \t </tr>
\t \t \t </table>
\t \t </div>
\t </div>
\t
\t <div class="footer">
\t \t <div class="footer-content">
\t \t <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>
\t \t <a href="index.html"><p>Sinta a Energia!</p></a>
\t \t </div>
\t </div>
\t
\t
</body>
</html>
我已經試圖把100vw,我已經試圖把 <meta name="viewport" content="width=device-width, initial-scale=1.0">
但沒有工作要麼...
有是2個CSS,一個是消息,一個是我使用的所有具有菜單和頁腳的其他網頁...
有人可以幫我解決這件事情? ?其殺死我不明白爲什麼Android是欺負我......
當你把「'? – mlegg
你也有頁腳%'.footer {\t width:100%;}'但是頁腳內容爲px'.footer-content {\t width:1100px;'} – mlegg
當我放置視口內容時它會變得更小,關於頁腳,我使用頁腳作爲圖像和頁腳內容作爲寫入空間,因爲我不希望寫入空間超過1100px。 –