Wie verwende ich Media Queries für Android-Geräte mit den Android-Versionen 2.2.1 und 2.3.5 und einer Bildschirmgröße von 240 * 320 und einer Bildschirmgröße von 480 * 800?
Ich musste ein Bild verwendenDas war von der Größe 304 * 250.
Es funktioniert perfekt mit einer Bildschirmgröße von 320 * 480 und einer Bildschirmgröße von 720 * 1280.
Nun, als ich das gleiche in einer Bildschirmgröße von 240 * 320 und einer Bildschirmgröße von 480 * 800 überprüfen wollte?Weder die Hintergrundbilder noch der Datenwert waren zu sehen.
Abhilfemaßnahme:
Ich dachte daran, anstelle des Bildes einen Kastenschatten zu verwenden. Ich habe es implementiert und in einer Bildschirmgröße von 320 * 480 getestet. Es war perfekt.
Ich dachte daran, dasselbe mit einer Bildschirmgröße von 240 * 320 und einer Bildschirmgröße von 480 * 800 zu testenMedienabfrage
Ich bezog mich vonHier und ich habe versucht, es zu implementieren, aber ich war nicht erfolgreich.
Meine normale CSS
.container
{
width:80%; height:auto; margin-left:10px; margin-right:10px; background-color:#CCCCCC; text-align:justify; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; min-height:250px;
}
Mein Media Query CSS
@media only screen and (max-device-width: 240px)
{
.container
{
width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
}
}
Ich habe das CSS folgendermaßen aufgerufen
<link rel="stylesheet" type="text/css" href="css/common_set.css" />
Problem: Es wurde nicht implementiert. Ich kann die Box nicht sehen. Es war nur ein leerer Bildschirm.
Es greift nicht auf die Medienabfrage zu, die oben erwähnt wurde.
LÖSUNGEN VERSUCHT
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
Gibt es einen Fehler in meiner Implementierung? Bitte helfen Sie!
Zur Klarstellung, ob ich den 1. Punkt der Antwort verstanden habe
.name_layer
{
float:left; width:100%; padding:0; margin:0; line-height:35px; height:35px; color: #FFFFFF; font-size:20px;
}
.name_layer_text
{
margin-left:1%;
}
.swipe_body
{
padding:0; margin:0; width:100%; height:480px;
}
.container
{
width:200px; height:10px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px;
}
@media only screen and (max-width: 240px)
{
.container
{
width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
}
}
Ist das richtig? aber meine Ausgabe kommt nach dem Container-CSS ... und ich teste es auf einem Gerät nicht Browser
Bearbeiten: 2
@media only screen and (max-width:240px)
{
.container
{
width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px;
}
}
@media only screen and (min-width:240px)
{
.container
{
width:250px; height:250px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; top:5px min-height:200px;
}
}
Es ist ein kleineres Gerät und nimmt die 2. CSS-Mindestbreite: 240px