我希望这个网站能够在所有正在检索的浏览器和设备中做出响应。打开时请确保允许ActiveX内容。该网站没有病毒。
@import url("http://fonts.googleapis.com/css?family=Lato");
body {
background: -moz-linear-gradient(307deg, rgba(105,250,255,1) 0%, rgba(92,232,211,1) 20%, rgba(74,207,147,1) 50%, rgba(18,168,153,1) 83%, rgba(0,156,156,1) 94%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(105,250,255,1)), color-stop(20%, rgba(92,232,211,1)), color-stop(50%, rgba(74,207,147,1)), color-stop(83%, rgba(18,168,153,1)), color-stop(94%, rgba(0,156,156,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(307deg, rgba(105,250,255,1) 0%, rgba(92,232,211,1) 20%, rgba(74,207,147,1) 50%, rgba(18,168,153,1) 83%, rgba(0,156,156,1) 94%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(307deg, rgba(105,250,255,1) 0%, rgba(92,232,211,1) 20%, rgba(74,207,147,1) 50%, rgba(18,168,153,1) 83%, rgba(0,156,156,1) 94%); /* opera 11.10+ */
background: -ms-linear-gradient(307deg, rgba(105,250,255,1) 0%, rgba(92,232,211,1) 20%, rgba(74,207,147,1) 50%, rgba(18,168,153,1) 83%, rgba(0,156,156,1) 94%); /* ie10+ */
background: linear-gradient(143deg, rgba(105,250,255,1) 0%, rgba(92,232,211,1) 20%, rgba(74,207,147,1) 50%, rgba(18,168,153,1) 83%, rgba(0,156,156,1) 94%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69FAFF', endColorstr='#009C9C',GradientType=0 ); /* ie6-9 */
}
.Chile {border: none; width:20%; height:30px; position:absolute; top:8px; left:25px; margin:10px; padding:10px; height: 30px;}
#chName {position:absolute; top:17px; left:34px;}
#chi {position:absolute; top:15px; left:225px; width:125px; height:77px;}
.chClk {position:absolute; top:60px; left:50px;}
.Peru {border: none; width:20%; height:30px; position:absolute; top:8px; left:355px; margin:10px; padding:10px; height: 30px;}
#peName {position:absolute; top:17px; left:362px;}
#per {position:absolute; top:15px; left:555px; width:125px; height:77px;}
.peClk {position:absolute; top:60px; left:50px;}
.Argentina {border: none; width:20%; height:30px; position:absolute; top:8px; left:685px; margin:10px; padding:10px; height: 30px;}
#arName {position:absolute; top:17px; left:695px;}
#arg {position:absolute; top:15px; left:887px; width:125px; height:77px;}
.arClk {position:absolute; top:60px; left:50px;}
.Uruguay {border: none; width:20%; height:30px; position:absolute; top:8px; left:1014px; margin:10px; padding:10px; height: 30px;}
#urName {position:absolute; top:17px; left:1025px;}
#uru {position:absolute; top:15px; left:1217px; width:125px; height:77px;}
.urClk {position:absolute; top:60px; left:50px;}
.chBox {background-color:#F9FAFA; width:20%; height:90%; border:2px solid #D2D9D9; position:absolute; top:175px;
left:25px; margin:10px; text-align:left; padding:10px;}
<!-- begin snippet: js hide: false console: true babel: false --><!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Custom Select Menu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- CHILE -->
<img id="chName" src="https://south-america-dashboard.000webhostapp.com/Country_names/chile.png" width="200px" height="64px"></img>
<div class="Chile">
<div class="chClk">
<iframe src="http://free.timeanddate.com/clock/i5p80il2/n232/fn5/tct/pct/ftb/th2" frameborder="0" width="94" height="19" allowTransparency="true"></iframe>
</div>
</div>
<img src="https://south-america-dashboard.000webhostapp.com/Flags/chi.png" id="chi"></img>
<div class="chBox">
<div class="chAp">
<select id="mounth">
<option value="hide">- Aplicación -</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
</select>
</div>
<div class="chEv">
<select id="year">
<option value="hide">- Evento -</option>
<option value="Event 1">Event 1</option>
<option value="Event 2">Event 2</option>
<option value="Event 3">Event 3</option>
<option value="Event 4">Event 4</option>
</select>
</div>
</div>
<!-- PERÚ -->
<img id="peName" src="https://south-america-dashboard.000webhostapp.com/Country_names/peru.png" width="200px" height="64px"></img>
<div class="Peru">
<div class="peClk"><iframe src="http://free.timeanddate.com/clock/i5p80il2/n131/fn5/tct/pct/ftb/th2" frameborder="0" width="94" height="19" allowTransparency="true"></iframe>
</div>
</div>
<img src="https://south-america-dashboard.000webhostapp.com/Flags/per.png" id="per"></img>
<!-- ARGENTINA -->
<img id="arName" src="https://south-america-dashboard.000webhostapp.com/Country_names/argentina.png" width="200px" height="64px"></img>
<div class="Argentina">
<div class="arClk"><iframe src="http://free.timeanddate.com/clock/i5p80il2/n51/fn5/tct/pct/ftb/th2" frameborder="0" width="94" height="19" allowTransparency="true"></iframe>
</div>
</div>
<img src="https://south-america-dashboard.000webhostapp.com/Flags/arg.png" id="arg"></img>
<!-- URUGUAY -->
<img id="urName" src="https://south-america-dashboard.000webhostapp.com/Country_names/uruguay.png" width="200px" height="64px"></img>
<div class="Uruguay">
<div class="urClk"><iframe src="http://free.timeanddate.com/clock/i5p80il2/n163/fn5/tct/pct/ftb/th2" frameborder="0" width="94" height="19" allowTransparency="true"></iframe>
</div>
</div>
<img src="https://south-america-dashboard.000webhostapp.com/Flags/uru.png" id="uru"></img>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
</div>
</div>
<img src="https://south-america-dashboard.000webhostapp.com/Flags/uru.png" id="uru"></img>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
<!-- end snippet -->
答案 0 :(得分：0)
您可能首先要考虑viewport meta tag。您也可能需要CSS media rules。除此之外，调整主容器，将元素容器缩放到approprite大小等等。
答案 1 :(得分：0)
为了让所有响应都达到100％我建议编辑样式：
#uru {position:absolute; top:15px; left:1217px; width:125px; height:77px;}
这是一个非常静态的代码，也许你需要一个宽度为100％的cointainer，并尽量少用position:absolute.