Je dois maintenir une résolution de 1920 x 1080 de ce site Web dans tous les navigateurs et appareils

-1

Je veux que ce site Web soit réactif dans tous les navigateurs et les appareils qui sont récupérés. Assurez-vous d'autoriser le contenu ActiveX lors de son ouverture. Le site est exempt de virus.Je dois maintenir une résolution de 1920 x 1080 de ce site Web dans tous les navigateurs et appareils

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

Source

2017-06-16 T100

Il vous suffit de modifier toutes vos tailles et positions fixes pour les unités d'affichage évolutives, comme le pourcentage. – LGSon

Voulez-vous rectifier le code s'il vous plaît? – T100

Si c'est ce que vous demandez, alors vous êtes venu au mauvais endroit. SO n'est pas un service de rédaction de code, trouvez-vous une société de développement Web et ils seront heureux de le faire – LGSon

La première chose que vous voudrez peut-être se pencher sur viewport meta tag. Aussi, vous pourriez avoir besoin de CSS media rules. En dehors de cela, modifiez vos conteneurs principaux, mettez à l'échelle vos conteneurs d'éléments à la taille appropriée et ainsi de suite.

Source

2017-06-16 07:41:21 amberbrew

Merci. Je vais chercher des informations sur la balise meta viewport et reviendra si d'autres problèmes surviennent. Passez une bonne journée! ☺ – T100

Pour faire tous sensibles à 100%, je suggère de modifier les styles tels que:

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

Ce code est très statique, il faut peut-être un cointainer avec une largeur de 100% et essayez d'utiliser moins possible la position:absolute.

Bonne chance!

Source

2017-06-20 09:49:04 Lib3r74

Je dois maintenir une résolution de 1920 x 1080 de ce site Web dans tous les navigateurs et appareils

Répondre

Questions connexes