我需要在所有瀏覽器和設備上保留本網站的1920 x 1080分辨率

-1

我想讓本網站對所有瀏覽器和設備進行響應。請確保在打開它時允許使用ActiveX內容。該網站沒有病毒。我需要在所有瀏覽器和設備上保留本網站的1920 x 1080分辨率

@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 \t \t {border: none; width:20%; height:30px; position:absolute; top:8px; left:25px; margin:10px; padding:10px; height: 30px;} 
 
#chName \t \t {position:absolute; top:17px; left:34px;} 
 
#chi \t \t {position:absolute; top:15px; left:225px; width:125px; height:77px;} 
 
.chClk \t \t {position:absolute; top:60px; left:50px;} 
 
\t \t \t 
 
.Peru \t \t {border: none; width:20%; height:30px; position:absolute; top:8px; left:355px; margin:10px; padding:10px; height: 30px;} 
 
#peName \t \t {position:absolute; top:17px; left:362px;} 
 
#per \t \t {position:absolute; top:15px; left:555px; width:125px; height:77px;} 
 
.peClk \t \t {position:absolute; top:60px; left:50px;} 
 
\t \t \t 
 
.Argentina {border: none; width:20%; height:30px; position:absolute; top:8px; left:685px; margin:10px; padding:10px; height: 30px;} 
 
#arName \t \t {position:absolute; top:17px; left:695px;} 
 
#arg \t \t {position:absolute; top:15px; left:887px; width:125px; height:77px;} 
 
.arClk \t \t {position:absolute; top:60px; left:50px;} 
 
\t \t \t 
 
.Uruguay \t {border: none; width:20%; height:30px; position:absolute; top:8px; left:1014px; margin:10px; padding:10px; height: 30px;} 
 
#urName \t \t {position:absolute; top:17px; left:1025px;} 
 
#uru \t \t {position:absolute; top:15px; left:1217px; width:125px; height:77px;} 
 
.urClk \t \t {position:absolute; top:60px; left:50px;} 
 

 

 
\t \t \t 
 
.chBox \t  {background-color:#F9FAFA; width:20%; height:90%; border:2px solid #D2D9D9; position:absolute; top:175px; 
 
\t \t \t left:25px; margin:10px; text-align:left; padding:10px;} 
 
\t \t \t \t \t 
 

 
<!-- 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> 
 
    
 
<!-- \t CHILE \t \t --> 
 

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

 
\t <div class="chBox"> 
 
\t <div class="chAp"> 
 
\t <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> 
 
\t </select> 
 
\t </div> 
 
\t  
 
\t <div class="chEv"> 
 
\t <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> 
 
\t </div> 
 
\t </div> 
 

 
<!-- \t PERÚ \t --> 
 
\t 
 
<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> 
 

 

 
<!-- \t ARGENTINA \t --> 
 
\t 
 
<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> 
 

 

 
<!-- \t URUGUAY \t --> 
 
\t 
 
<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 -->

來源

2017-06-16 T100

只需將所有固定尺寸和位置更改爲可縮放的尺寸和位置，例如百分比視口單位。 – LGSon

請您好好糾正我的代碼嗎？ – T100

如果這就是你要求的，那麼你來到了錯誤的地方。 SO不是代碼編寫服務，找到自己的網絡開發公司，他們會很高興做到這一點 – LGSon

第一件事，你可能想看看viewport meta tag。您也可能需要CSS media rules。除此之外，調整你的主容器，將你的元素容器縮放到approprite大小等等。

來源

2017-06-16 07:41:21 amberbrew

謝謝。我將查找有關視口元標記的信息，並在出現更多問題時返回。祝你有美好的一天！ ☺ – T100

對於以100％的所有響應，我建議編輯喜歡的樣式：

#uru  {position:absolute; top:15px; left:1217px; width:125px; height:77px;}

這是一個非常靜態代碼，也許你需要一個cointainer寬度爲100％，並儘量少用盡可能position:absolute.

祝你好運！

來源

2017-06-20 09:49:04 Lib3r74

我需要在所有瀏覽器和設備上保留本網站的1920 x 1080分辨率

回答

相關問題