machen eine div Bildschirmgröße abhängig

Ich arbeite an einer App mit Ionic Framework und ich bin immer noch ein Neuling in CSS. Ich habe einen Bilder-Slider mit Timer erstellt, aber die Größe ist fest. Allerdings möchte ich es je nach Bildschirmgröße und Auflösung ändern.machen eine div Bildschirmgröße abhängig

Dies ist der HTML-Inhalt:

<ion-content> 
    <div class="container"> 
     <div id="content-slider"> 
      <div id="slider"> 
       <div id="mask"> 
        <ul> 
         <li id="first" class="firstanimation"> 
          <a href=#><img src="../img/coffe_and_sweet_sale.jpg"/></a> 
          <div class="tooltip"><h1>text 1</h1></div> 
         </li> 
         <li id="second" class="secondanimation"> 
          <a href="#"><img src="../img/pizza_sale.png"/></a> 
          <div class="tooltip"><h1>text 2</h1></div> 
         </li> 
         <li id="third" class="thirdanimation"> 
          <a href="#"><img src="../img/sandwich_sale.jpg"/></a> 
          <div class="tooltip"><h1>text 3</h1></div> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
    </ion-content>

style.css

Ich habe so etwas wie das:

#slider{ 
    background: #000; 
    border: 5px solid #eaeaea; 
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7); 
    height: 320px; 
    width: 680px; 
    margin: 40px auto 0; 
    overflow: visible; 
    position: relative; 
} 

#mask{ 
    overflow: hidden; 
    height: 310px; 
} 

#slider ul{ 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

#slider li{ 
    width: 680px; 
    height: 320px; 
    position: absolute; 
    top: -325px; 
    list-style: none; 
} 

#slider img{ 
    width: 680px; 
    height: 320px; 
}

es also jetzt zeigt den im altert perfekt, aber es passt natürlich nicht zu jedem Bildschirm.

EDIT 1

ich den Stil für den Schieber Animation ich hinzufügen:

#slider li.firstanimation{ 
    animation: cycle 24s linear infinite; 
} 

#slider li.secondanimation{ 
    animation: cycletwo 24s linear infinite; 
} 
#slider li.thirdanimation{ 
    animation: cyclethree 24s linear infinite; 
} 

@keyframes cycle{ 
    0% {top: 0px;} 
    3.33% {top: 0px;} 
    26.64% {top:0px; opacity: 1; z-index: 0;} 
    29.97% {top: 325px; opacity: 0; z-index: 0;} 
    30.97% {top:-325px; opacity: 0; z-index: 0;} 
    93.34% {top:-325px; opacity: 0; z-index: 0;} 
    96.67% {top: -325px; opacity: 0; } 
    100% {top: 0px; opacity: 1;} 
} 

@keyframes cycletwo{ 
    0% {top: -325px; opacity: 0;} 
    26.64% {top: -325px; opacity: 0} 
    29.97% {top:0px; opacity: 1;} 
    33.3% {top: 0px; opacity: 1;} 
    59.94% {top: 0px; opacity: 1; z-index: 0;} 
    63.27% {top: 325px; opacity: 0; z-index: 0;} 
    64.27% {top: -325px; opacity: 0; z-index: -1; } 
    100% {top: -325px; opacity: 0; z-index: -1;} 
} 

@keyframes cyclethree{ 
    0% {top: -325px; opacity: 0;} 
    59.94% {top: -325px; opacity: 0;} 
    63.27% {top:0px; opacity: 1;} 
    66.6% {top: 0px; opacity: 1;} 
    93.24% {top: 0px; opacity: 1;} 
    96.57% {top: 325px; opacity: 0; z-index: 0;} 
    97.57% {top: -325px; opacity: 0; z-index: -1;} 
    100% {top: -325px; opacity: 0; z-index: -1;} 
} 

#slider .tooltip{ 
    background: rgba(0,0,0,0.7); 
    width: 450px; 
    height; 60px; 
    position: relative; 
    bottom: 85px; 
} 

#slider .tooltip h1{ 
    color: #fff; 
    font-size: 24px; 
    font-weight: 300; 
    line-height: 60px; 
    padding: 0 0 0 10px; 
} 

#slider .tooltip { 
    transition: all 0.3 ease-in-out; 
}

Quelle

2016-06-11 kitsuneFox

* Passt nicht in jeden Bildschirm *? Es sollte gut funktionieren auf den meisten Computern, aber in Handys könnte es verkleinert werden (klein) oder geht mit Scrollbar außerhalb des Darstellungsbereichs (abhängig von 'Viewport Meta' Tag) Wie auch immer, anstelle von absoluten Pixeln, Prozenteinheiten'% 'oder verwenden Viewport-Einheiten ('vh',' vw'). Bitte beachten Sie, dass Sie, um die prozentuale Höhe zu erreichen, ** die Höhe zuerst nach html und body definieren müssen: 'html, body {height: 100%; } ' – Aziz

Können Sie eine jfiddle dafür erstellen. – frnt

Ich habe eine Medienabfrage für die Höhe hinzugefügt. Here's ein Link für mediaquery, wenn Sie etwas ändern möchten.

Wie für Slider habe ich das Problem jetzt zwischen dritten und ersten Folie behoben, gibt es eine leere Folie. Ich war mir nicht sicher, ob es mit Absicht oder nicht ist. Ich hoffe, Sie können es bei Bedarf reparieren.

#slider{ 
    background: #000; 
    border: 5px solid #eaeaea; 
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7); 
    height: 320px; 
    width: 80%; 
    max-width: 680px; 
    margin: 40px auto 0; 
    overflow: visible; 
    position: relative; 
    } 

    #mask{ 
    overflow: hidden; 
    height: 310px; 
    } 

    #slider ul{ 
    margin: 0; 
    padding: 0; 
    height: 320px; 
    width: inherit; 
    position: relative; 
    } 

    #slider a{ 
    width: 100%; 
    height: 100%; 
    } 

    #slider li{ 
    width: inherit; 
    height: 320px; 
    position: absolute; 
    top: 100px; 
    list-style: none; 
    } 

    #slider img{ 
    width: 100%; 
    height: 320px; 
    } 
    #slider li.firstanimation{ 
    animation: cycle 24s linear infinite; 
    } 

    #slider li.secondanimation{ 
    animation: cycletwo 24s linear infinite; 
    } 
    #slider li.thirdanimation{ 
    animation: cyclethree 24s linear infinite; 
    } 

    @keyframes cycle{ 
    0% {top: 0px;} 
    3.33% {top: 0px;} 
    26.64% {top:0px; opacity: 1; z-index: 0;} 
    29.97% {top: 325px; opacity: 0; z-index: 0;} 
    30.97% {top:-325px; opacity: 0; z-index: 0;} 
    93.34% {top:-325px; opacity: 0; z-index: 0;} 
    96.67% {top: -325px; opacity: 0; } 
    100% {top: 0px; opacity: 1;} 
    } 

    @keyframes cycletwo{ 
    0% {top: -325px; opacity: 0;} 
    26.64% {top: -325px; opacity: 0} 
    29.97% {top:0px; opacity: 1;} 
    33.3% {top: 0px; opacity: 1;} 
    59.94% {top: 0px; opacity: 1; z-index: 0;} 
    63.27% {top: 325px; opacity: 0; z-index: 0;} 
    64.27% {top: -325px; opacity: 0; z-index: -1; } 
    100% {top: -325px; opacity: 0; z-index: -1;} 
    } 

    @keyframes cyclethree{ 
    0% {top: -325px; opacity: 0;} 
    59.94% {top: -325px; opacity: 0;} 
    63.27% {top:0px; opacity: 1;} 
    66.6% {top: 0px; opacity: 1;} 
    93.24% {top: 0px; opacity: 1;} 
    96.57% {top: 325px; opacity: 0; z-index: 0;} 
    97.57% {top: -325px; opacity: 0; z-index: -1;} 
    100% {top: -325px; opacity: 0; z-index: -1;} 
    } 

    #slider .tooltip{ 
    background: rgba(0,0,0,0.7); 
    width: 60%; 
    height; 60px; 
    position: relative; 
    bottom: 85px; 
    } 

    #slider .tooltip h1{ 
    color: #fff; 
    font-size: 24px; 
    font-weight: 300; 
    line-height: 60px; 
    padding: 0 0 0 10px; 
    } 

    #slider .tooltip { 
    transition: all 0.3 ease-in-out; 
    } 

    @media screen and (max-height: 380px){ 
    #slider{ 
     height: 200px; 
    } 

    #mask{ 
     height:190px; 
    } 

    #slider img{ 
     height:190px; 
    } 

    #slider li{ 
     height:190px; 
    } 

    #slider ul{ 
     height:190px; 
    } 

    #slider .tooltip{ 
     bottom: 80px; 
    }   
    }

Quelle

2016-06-11 09:11:21 a1626

Nun, die Breite reagiert auf die Bildschirmgröße, aber die Höhe nicht und auch die Animation funktioniert nicht richtig, nur das erste Bild wird für ein paar Sekunden angezeigt und dann gibt es einen schwarzen Schieberegler für ein paar Sekunden und dann das erste Bild kehrt zurück und so weiter ,, – kitsuneFox

Im Allgemeinen werden Höhen gleich gehalten, aber wenn Sie wollen, kann ich verschiedene Höhen für verschiedene Bildschirmbereiche konfigurieren. Auch kann ich Ihren Code für Schieberegler erhalten, damit ich es prüfen und Ihnen bessere Lösung zur Verfügung stellen kann. – a1626

Ok jetzt Es funktioniert gut. Ich werde über den Code gehen und kleinere Dinge ändern, aber alles ist großartig! Übrigens, können Sie mir bitte vorschlagen, wie man CSS lernt? Ich bin ein erfahrener Programmierer, aber CSS war immer mein schwächstes Glied. Ich möchte das beheben – kitsuneFox

ändern

#slider img{ 
    max-width:100%; 
    display:block; 
    width:100%; 
}

Absolutwerte des Bildes entfernen.

Quelle

2016-06-11 08:17:05 undefinedtoken

Ich möchte den gesamten Schieberegler ändern, wenn der Bildschirm sich ändert – kitsuneFox

in diesem Fall können Sie die gleiche Regel auf '# slider' – a1626

und was ist mit der Maske? – kitsuneFox

machen eine div Bildschirmgröße abhängig

Antwort

Verwandte Themen