Wie wird die Körperbreite in der CSS3-Medienabfrage automatisch der Gerätebreite angepasst?

Ich mache jetzt eine mobile Website und versuche, mithilfe von CSS3-Medienabfragen verschiedene Geräte anzusprechen. Ein Teil meines Code ist wie folgt:Wie wird die Körperbreite in der CSS3-Medienabfrage automatisch der Gerätebreite angepasst?

@media screen and (max-width:320px) { 
body { 
    width: 320px; 
} 
/* some other style */ 
}

Wie Sie sehen können, habe ich explizit die Körperbreite setzen, um sicherzustellen, dass es nicht die Breite nicht zeigen, dass ich für den Desktop in meinem normalen CSS gesetzt, das ist 920px . Ich frage mich, ob es irgendwie möglich ist, dass die Körperbreite automatisch auf die Gerätebreite eingestellt werden kann und ich muss das nicht jedes Mal manuell einstellen, wenn ich ein neues @media erstelle.

By the way, ich auch den folgenden Code in meinem head-Tag hinzu:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Quelle

2013-02-26 chaonextdoor

Ist etwas nicht in Ordnung mit 'Breite: 100%'? – cimmanon

'Breite: 100%' funktioniert nicht für adsense reagierende Anzeigenblöcke ... Muss Größe definieren – Jess

Verwenden Sie einfach width: auto;

Unterschied zwischen width: 100%; und width: auto; ist, dass die äußere Breite für 100% ist 100% + padding-left + padding-right, innere 100% . Äußere Breite von width: auto ist 100%, innere Breite ist 100% - padding-left - padding-right wenn und nur wenn display ist block und keine float ist gesetzt (und kein Floated-Element ohne clear ist vorher).

Quelle

2013-02-26 17:55:03

Danke, Mann! Eine weitere Frage, wie ich alle Elemente Breite innerhalb des Body-Tags prozentual einstellen, wenn ich hineinzoom, es scheint, dass die Breite dieser Items immer noch die gleiche ist, aber was ich tun möchte ist, die Breite von ihnen zu vergrößern, wie könnte ich das erreichen? – chaonextdoor

Sie können nur die Eigenschaft 'min-width' auf einen festen Wert setzen, z. 'minimale Breite: 320px;'. Legen Sie es nur für die kleinste unterstützte @ media-Größe als Mindestgröße fest. Sie können "min-width" auch für ein beliebiges Element festlegen, es ist jedoch empfehlenswert, es immer für body festzulegen, da floated-Elemente ihre Position ändern sollten. –

Funktioniert nicht immer. Wenn Sie beispielsweise versuchen, die Bootstrap-Popover-Breite festzulegen. Verwenden Sie die Breite: 100vw; Unten von @ sh3nan1gans –

Sie können auch

width: 100vw;

verwenden, die das Element auf 100% der Breite des Ansichtsfenster festgelegt werden. Sie können Ihren Browser überprüfen Kompatibilität wollen vor der Zugabe: http://caniuse.com/#search=vw

Weitere Informationen über Darstellungs Sizing: https://css-tricks.com/viewport-sized-typography/

Quelle

2015-05-04 21:06:15 sh3nan1gans

Dies ist einer der besten Tipps, die ich bei der Verwendung von CSS in modernen Browsern gesehen habe. Dies ist äußerst nützlich und kann viele komplexe Probleme lösen. Wenn Sie beispielsweise ein Scroll-Div haben, das breiter ist als das Viewport, und Sie das Child-Div in diesem Div auf einen Prozentsatz der View-Port-Breite beschränken möchten. Danke vielmals. – Sunil

Wie wird die Körperbreite in der CSS3-Medienabfrage automatisch der Gerätebreite angepasst?

Antwort

Verwandte Themen