Responsive Webseite

Question

Ich habe ein Projekt, um eine Website zu erstellen, aber ich mache es manuell ohne Bootstrap. Das Problem ist, wenn ich heranzoomen und herauszoomen, reagiert es nicht .. so, wie man eine reaktionsfähige Website in jedem Bildschirmtyp zu erstellen und wenn ich hinein-/herauszoomen? Hier ist meine CSS-Code

body {font-family: 'Montserrat', sans-serif;}

.wadah{ 
    width:83.8%; 
    height:1000px; 
    position:absolute; 
    z-index:1; 
    top:650px; 
    left:102px; 
    background:white; 
    border:1px solid #d2d1d1} 
.top-news{ 
    width: 1125px; 
    height:220px; 
    background:#; 
    border-bottom:1px solid #d2d1d1} 
.top-news-inside{ 
    width:281.25px; 
    height:220px; 
    float:left; 
    padding:20px; 
    box-sizing:border-box; 
    background:#; 
    } 
.content{ 
    width:1125px; 
    height:auto; 
    background:#} 
.content-left{ 

    } 

Answer 1

Zusammen mit CSS3 können Sie einige Medienabfragen verwenden: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Sie haben soeben Wählen Sie geeignete Haltepunkte und schreiben Sie Ihren aktuellen Stil um. Zum Beispiel können Sie alle Elemente mit der Regel die float: none Eigenschaft in Medienabfragen hinzufügen und ihre Breite auf 100% des Bildschirms erweitern (Sie können wahrscheinlich diese Änderungen an Ihrer top-news-inside Klasse vornehmen). Dadurch wird Ihre Site in Spalten aufgeteilt.

Zur Steuerung Elemente schwimmend stellen Sie sicher, Sie verwenden clear: both Regel:

wie

<link rel="stylesheet" type="text/css" href="responsive.css"> 

erstellen CSS-Datei responsive.css für die Herstellung von reaktions Sie

: http://www.w3schools.com/css/css_float.asp

Answer 2

diese in den Header sollte ändern Sie Ihre CSS-Codes für unterschiedliche Größe

zum Beispiel:

@media only screen and (max-width: 360px) { 
.wadah{ 
    height:200px; 
    top:350px; 
    left:52px; 
} 
} 

oder

@media only screen and (max-width: 640px) { 
.wadah{ 
    height:400px; 
    top:500px; 
    left:80px; 
} 
} 

* Die größere Größe sollte *

mit dieser höher sein, das Sie mehr als wechselnde Größe tun können (wie Farbwechsel oder das mobile navbar)

Ich hoffe, das ist nützlich

Entschuldigung für schlechtes Englisch: D