PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Besonderer Inhalt
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Hilfe, Media Queries für mobile devices
Beitrag
<blockquote data-quote="mia_aim" data-source="post: 2029938" data-attributes="member: 588608"><p>Herzlichen Dank für die schnelle, hilfreiche Antwort! </p><p>Okay, wenn ich dann die Angaben ändere von ursprünglich von DW festgelegt: </p><p></p><p>(wiso steht hier kein @media only screen-Befehl für Angaben < 480px??)</p><p></p><p>[CODE]/* Layout für Mobilgeräte: 480 px oder weniger. */</p><p>.gridContainer {</p><p> width: 90.675%;</p><p> padding-left: 1.1625%;</p><p> padding-right: 1.1625%;</p><p> }</p><p>#LayoutDiv1 { (kann das eigentlich gelöscht werden? hab einen post gelesen, der dann aber ein problem mit dem layout hatte...)</p><p> clear: both;</p><p> float: left;</p><p> margin-left: 0;</p><p> width: 100%;</p><p> display: block;</p><p>}</p><p>#header...</p><p>#...}</p><p>–––––––––––––––––––––––––––––––––––––</p><p>@media only screen and (min-width: 481px) {</p><p>.gridContainer {</p><p>#header...</p><p>#...} </p><p>–––––––––––––––––––––––––––––––––––––</p><p>@media only screen and (min-width: 769px) {</p><p>#header......</p><p>#...}</p><p></p><p>@media only screen and (min-width: 481px) {</p><p>.gridContainer {</p><p>#...</p><p>#...}</p><p></p><p>@media only screen and (min-width: 769px) {</p><p>#...</p><p>#...}[/CODE]–––––––––––––––––––––––––––––––––––––</p><p></p><p>wenn ich nun die oben genannten Angaben ändere in die Breakpoints 320,480,768,1024,980,1200 (damit ich es am desktop kontrollieren kann, nein, hab noch nicht online)</p><p></p><p>@media only screen and (min-width: 320px) </p><p>@media only screen and (max-width: 480px) </p><p>@media only screen and (min-width: 768px) </p><p>@media only screen and (max-width: 1024px) </p><p>@media only screen and (min-width: 980px) </p><p>@media only screen and (max-width: 1200px) </p><p></p><p>läuft das dann auf den mobile devices auch oder brauch ich extra feste definitionen zusätzlich wie min-device-width...portrait...</p><p></p><p>Dankeschön<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile :)" loading="lazy" data-shortname=":)" /></p><p></p><p>.... Frage: Wenn ich dann neue Breakpoints setze wie </p><p></p><p>@media only screen and (min-width: 1024px) and (max-width: 1200)</p><p>@media only screen and (min-width: 320px)</p><p>@media only screen and (min-width: 480px)</p><p>@media only screen and (min-width: 768px)</p><p></p><p>>> brauch ich doch zusätzlich noch die ...min-device-width and landscape..Angaben für Iphone und Tablet?</p><p></p><p>das empfohlene video war echt hilfreich.</p><p></p><p>mit dem viewport-tag..width=device-width..user-scalable... entfällt die device-angabe in z.b.: @media only screen and (max-width:768px){...}</p><p></p><p>nur wird nicht auf die landscape-betrachtung eingegangen. kann man die einfach anfügen mit: @media only screen and (max-width:768px) <strong>and (orientation:landscape)</strong> {</p><p>...} ??</p></blockquote><p></p>
[QUOTE="mia_aim, post: 2029938, member: 588608"] Herzlichen Dank für die schnelle, hilfreiche Antwort! Okay, wenn ich dann die Angaben ändere von ursprünglich von DW festgelegt: (wiso steht hier kein @media only screen-Befehl für Angaben < 480px??) [CODE]/* Layout für Mobilgeräte: 480 px oder weniger. */ .gridContainer { width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; } #LayoutDiv1 { (kann das eigentlich gelöscht werden? hab einen post gelesen, der dann aber ein problem mit dem layout hatte...) clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header... #...} ––––––––––––––––––––––––––––––––––––– @media only screen and (min-width: 481px) { .gridContainer { #header... #...} ––––––––––––––––––––––––––––––––––––– @media only screen and (min-width: 769px) { #header...... #...} @media only screen and (min-width: 481px) { .gridContainer { #... #...} @media only screen and (min-width: 769px) { #... #...}[/CODE]––––––––––––––––––––––––––––––––––––– wenn ich nun die oben genannten Angaben ändere in die Breakpoints 320,480,768,1024,980,1200 (damit ich es am desktop kontrollieren kann, nein, hab noch nicht online) @media only screen and (min-width: 320px) @media only screen and (max-width: 480px) @media only screen and (min-width: 768px) @media only screen and (max-width: 1024px) @media only screen and (min-width: 980px) @media only screen and (max-width: 1200px) läuft das dann auf den mobile devices auch oder brauch ich extra feste definitionen zusätzlich wie min-device-width...portrait... Dankeschön:) .... Frage: Wenn ich dann neue Breakpoints setze wie @media only screen and (min-width: 1024px) and (max-width: 1200) @media only screen and (min-width: 320px) @media only screen and (min-width: 480px) @media only screen and (min-width: 768px) >> brauch ich doch zusätzlich noch die ...min-device-width and landscape..Angaben für Iphone und Tablet? das empfohlene video war echt hilfreich. mit dem viewport-tag..width=device-width..user-scalable... entfällt die device-angabe in z.b.: @media only screen and (max-width:768px){...} nur wird nicht auf die landscape-betrachtung eingegangen. kann man die einfach anfügen mit: @media only screen and (max-width:768px) [B]and (orientation:landscape)[/B] { ...} ?? [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?
Antworten
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Hilfe, Media Queries für mobile devices
Oben