HTML Auto fit zu allen Bildschirmen

-2

I Entwurf gerade abgeschlossen haben eine Schnittstelle für eine mobile App die Größe, die ich verwendet wurde 750w von 1334H das Problem seiner Darstellung auf dem App-Tests Bildschirm zu groß istHTML Auto fit zu allen Bildschirmen

Ich brauche Auto zu passen das Design auf allen Bildschirmen, ohne eine Auflösung zu verlieren hier ist CSS-Code

.username { 
 
    background: #397ba5; 
 
    border: none; 
 
    width: 286; 
 
    height: 82; 
 
    color: white; 
 
    font-size: 24; 
 
} 
 
.password { 
 
    background: #397ba5; 
 
    border: none; 
 
    width: 283; 
 
    height: 81; 
 
    color: white; 
 
    font-size: 24; 
 
} 
 

 
.memberlogin { 
 
    background-color: #fc4988; 
 
    border: none; 
 
    width: 472; 
 
    height: 85; 
 
    color: white; 
 
    font-size: 40; 
 
    font: BOLD; 
 
}

<html> 
 
<head> 
 
<title>Untitled-1</title> 
 
<link rel="stylesheet" href="http://infinityfreight.net/style.css"> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
</head> 
 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
 
<!-- Save for Web Slices (Untitled-1.psd) --> 
 
<table id="Table_01" width="640" height="1136" border="0" cellpadding="0" cellspacing="0"> 
 
\t <tr> 
 
\t \t <td colspan="7"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_01.gif" width="750" height="508" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="3" rowspan="4"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_02.gif" width="324" height="264" alt=""></td> 
 
\t \t <td colspan="3"> 
 
\t \t \t <input type=text class="username"></td> 
 
\t \t <td rowspan="8"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_04.gif" width="140" height="826" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="3"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_05.gif" width="286" height="49" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="2"> 
 
\t \t \t <input type=password class="password"></td> 
 
\t \t <td rowspan="2"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_07.gif" width="3" height="133" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="2"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_08.gif" width="283" height="52" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="2" rowspan="2"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_09.gif" width="138" height="124" alt=""></td> 
 
\t \t <td colspan="4"> 
 
\t \t \t <input type="submit" value="SIGN IN NOW" class="memberlogin"></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="4"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_11.gif" width="472" height="39" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td rowspan="2"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_12.gif" width="130" height="438" alt=""></td> 
 
\t \t <td colspan="3"> 
 
\t \t \t <a href="/"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_13.gif" width="318" height="29" alt=""></a></td> 
 
\t \t <td colspan="2" rowspan="2"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_14.gif" width="162" height="438" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="3"> 
 
\t \t \t <img src="http://infinityfreight.net/images/Untitled-1_15.gif" width="318" height="409" alt=""></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td> 
 
\t \t \t <img src="http://infinityfreight.net/images/spacer.gif" width="130" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://infinityfreight.net/images/spacer.gif" width="8" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://infinityfreight.net/images/spacer.gif" width="186" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://infinityfreight.net/images/spacer.gif" width="124" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://infinityfreight.net/images/spacer.gif" width="159" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="http://infinityfreight.net/images/spacer.gif" width="3" height="1" alt=""></td> 
 
\t \t <td> 
 
\t \t \t <img src="images/spacer.gif" width="140" height="1" alt=""></td> 
 
\t </tr> 
 
</table> 
 
<!-- End Save for Web Slices --> 
 
</body> 
 
</html>

Quelle

2016-11-24 NICK

Das Problem nicht beheben – NICK

Responsive Design ist in der Regel preferr ed, aber Sie können tun, was ich denke, Sie mit

wollen

<meta name="viewport" content="width=320" />

wo 320 ist die Anzahl der Pixel in der Ansicht (geräteunabhängig).

Siehe http://www.html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css-declaration/

Quelle

2016-11-24 17:42:27

Das Problem nicht behoben – NICK

-1

die CSS-Regel verwenden @media. Es können Sie Stile Code zu verwenden, wenn die Bildschirmbreite min X. ist

@media screen and (min-width: 480px) { 
    .username { 
     background: #397ba5; 
     border: none; 
     width: 286; 
     height: 82; 
     color: white; 
     font-size: 24; 
    } 
    .password { 
     background: #397ba5; 
     border: none; 
     width: 283; 
     height: 81; 
     color: white; 
     font-size: 24; 
    }  

    .memberlogin { 
     background-color: #fc4988; 
     border: none; 
     width: 472; 
     height: 85; 
     color: white; 
     font-size: 40; 
     font: BOLD; 
    } 
}

Quelle

2016-11-24 17:42:39 driconmax

CSS funktioniert nicht mehr beim Hinzufügen von @media Bildschirm und (min-Breite: 480px) – NICK

Ich lege es auf den Code und funktioniert, also überprüfen Sie, was Sie falsch machen, und prüfe, wie @media zu benutzen ist. Ich habe einen Link in die Antwort gesetzt – driconmax

Vielen Dank Kumpel, aber wenn Sie bitte einen Blick auf den HTML-Code jedes Bild hat seine eigene Breite und Höhen mit Ausnahme der Eingänge Ich benutze CSS für sie. Hinweis Ich habe Adobe Photoshop verwendet, um sie zu benennen und zu schneiden. und jedes Mal, wenn ich fertig bin, habe ich dieses Problem mit der Auflösung – NICK

Um Ihre App zu machen für jede Bildschirmgröße rescale Sie benötigen, um Medien-Anfragen zu verwenden. Ein Beispiel für eine Medienabfrage ist dies,

MIN-WIDTH

@media only screen and (min-width: 330px) {...}

Hier ist, was das eigentlich bedeutet:

"Wenn [device width] größer oder gleich [specified #] ist, dann tun {...}"

Also, wenn die tatsächliche "device width" ist 320px diese Bedingung wird false zurückgeben.

"Wenn 320px größer oder gleich 330px, dann tun {...}"

MAX-BREITE

@media only screen and (max-width: 330px) {...}

Verschiebt zu:

„Wenn [device width] kleiner oder gleich zu [specified #], dann tun {...} "

basierend auf diesem zweiten Beispiel, wenn die "device width" ist 320px die Bedingung erfüllt ist:

"Wenn 320px kleiner oder gleich 330px, dann tun {...}"

Alternative - Verwenden Sie Twitter Bootstrap

Meine Lieblings Art und Weise die Entwicklung reagiert, Anwendungen zu handhaben ist Twitter Bootstrap

zu verwenden
Bootstrap kommt aus der Box mobil freundlich und ansprechend. Bootstrap ist ein kostenloses Front-End-Web-Framework für zum Entwerfen von Websites und Webanwendungen. Es enthält HTML- und CSS-basierte Design-Vorlagen für Typografie, Formulare, Schaltflächen, Navigation und andere Schnittstellenkomponenten, sowie optionale JavaScript-Erweiterungen .

können Sie Twitter Bootstrap here finden

Auch wird Ihr Code die Höhe nicht definiert, und richtig Breite. Bitte beachten Sie den aktualisierten Code.

.username { 
    background: #397ba5; 
    border: none; 
    width: 286px; 
    height: 82px; 
    color: white; 
    font-size: 24; 
} 
.password { 
    background: #397ba5; 
    border: none; 
    width: 283px; 
    height: 81px; 
    color: white; 
    font-size: 24; 
} 

.memberlogin { 
    background-color: #fc4988; 
    border: none; 
    width: 472px; 
    height: 85px; 
    color: white; 
    font-size: 40; 
    font: BOLD; 
}

Sie können auch Prozente verwenden.

width: 20%;

Ok ich verstehe. Sie haben keine grundlegenden Kenntnisse von CSS. Ich werde versuchen, Ihnen ein weiteres Beispiel zu geben. Sie implementieren Medienabfragen nicht ordnungsgemäß. Hier ist ein Beispiel.

Medienabfragen wickeln nicht alle Ihre CSS ab. Sie machen CSS-Regeln. Wenn dann bestimmte Regeln basierend auf den unterschiedlichen Bildschirmgrößen geändert werden müssen, erstellen Sie eine Medienabfrage und legen die spezifische Regel ab, die innerhalb dieser geändert werden muss. Hier ist ein Beispiel.

Ich werde die Breite eines div auf Bildschirmgrößen ändern, die kleiner sind als 100px Bitte beachten Sie die px. So bezeichnen wir eine Größe. In vielen Fällen - aber nicht in allen Fällen verwenden wir px.

In diesem Beispiel erstellen wir .div1 dann erstellen wir eine Medienabfrage und legen die Klasse div1 darin mit einer anderen Breite.

.div1 { 
    width: 300px; 
    background: red; 
    color: black; 
} 

@media only screen and (max-width: 330px) { 
.div1 { 
    width: 100px; 
    background: red; 
    color: black; 
} 
}

Die Ausgabe dieses

Beispiel eins. Standard-css-Ausgabe,

Beispiel zwei. Mit den Medien eine Bildschirmgröße unter 100px abfragen.

Beachten Sie die Breite des div ist unterschiedlich, basierend auf der Größe des Bildschirms.

Quelle

2016-11-24 17:43:53 wuno

Große Erklärung, aber ich bin neu dazu Ich weiß nicht, wie man es macht Kannst du den Code für mich auf diese Weise beheben Ich habe eine Idee, wie du es gemacht hast? – NICK

Sie sollten programmieren und die Arbeit tun .. nicht wir .... das ist keine Seite für Anfänger, wie man programmiert. Überprüfen Sie die Regeln bitte. – driconmax

@Nick es gibt so viel zu tun, um Ihre App arbeiten zu lassen, es ist unmöglich für jeden von uns, es für Sie mit ein wenig Code zu tun. Wir können nur kleine Fragen beantworten. Sie definieren die Breite und Höhe Ihrer Elemente nicht korrekt. Sie müssen zu den Grundlagen zurückkehren und sich die Zeit nehmen zu lernen. Wenn Sie eine andere Frage haben, formatieren Sie sie korrekt und wir werden Ihnen helfen. versuche und stelle kleine Fragen und nicht solche Fragen so umfassend, wie ich meine ganze Seite auf eine bestimmte Art und Weise arbeiten lassen kannst. Lass mich wissen, ob ich noch etwas für dich tun kann, Kumpel. Bis dahin akzeptiere meine Antwort und benutze sie um zu lernen. Verwenden Sie auch Google. – wuno

HTML Auto fit zu allen Bildschirmen

Antwort

Verwandte Themen