HTML5 Responsive Web Design mit CSS

Ich folge einem der Videos auf YouTube von Lynda.com, um eine responsive Design-Webseite zu erstellen. Kurz gesagt, ich habe 2 CSS-Dateien, eine für den globalen Standard-Stil und eine für größere Bildschirme.HTML5 Responsive Web Design mit CSS

<!Doctype html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale = 1.0"/> 
    <title> Lynda.com | Creating a Responsive Web Design</title> 
    <link rel="stylesheet" type="text/css" href="first.css" /> 
    <link rel="stylesheet" type="text/css" href="firstLarge.css" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-depth:500px)" href ="firstSmall.css" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-depth:800px)" href ="firstMedium.css" /> 
    <!--[if lt IE 9]> 
     <script src - src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head>

Dies ist der Anfang meiner HTML-Datei. Der Teil, um den ich mich Sorgen mache, ist die zweite Relation. Wenn ich meinen Chrome-Browser erweitere gilt nichts in "firstLarge.css". Es ist, als ob das CSS gar nicht existiert.

Ich bin nur ein wenig verwirrt, wie das funktioniert. Jede Art von Hilfe wäre willkommen. Vielen Dank.

Quelle

2016-10-16 Henry Fok

Ohne zu sehen, was die Dateien enthalten, ist es ziemlich unmöglich, etwas zu sagen. – JJJ

... was ist 'max-depth'? – AA2992

@AnkithAmtange Hoppla, danke, dass du das eingefangen hast. Es sollte auch Breite sein, danke! –

-1

So für reaktionsschnelles Design brauchen Sie nicht 1000 CSS-Blätter suchen Medienabfragen. Die einzige Zeit, die ich mehr als ein Stylesheet benötigte, war, als ich einen Knopf hatte, der Benutzern erlaubte, die mobile Version der Web site zu übertreiben, um die Schreibtischversion anzusehen.

Machen Sie einfach Medienabfragen, wenn der Inhalt diktiert, wie Sie die Bildschirmgröße reduzieren, auch eine für größere Bildschirmgrößen sagen über 1920px machen.

Sorry, ich würde ein Beispiel für Sie codieren, bin aber nur auf meinem Handy.

Hoffentlich hilft das aber!

Quelle

2016-10-16 08:02:45 Allan

-1

Wenn Sie neu in UI-Entwickler sind, würde ich Ihnen empfehlen, css gründlich zu lernen, sollten Sie Medien Haltepunkte beachten.

Bitte überprüfen Sie den nachstehenden Link, um zu erfahren, wie Sie Medienabfragen verwenden können.

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints

würde ich Standard-Haltepunkte vorschlagen, wie unten zu verwenden.

@media only screen and (min-width: 0) and (max-width: 480px) { 
    /* css for mobile */ 
} 

@media only screen and (min-width: 481) and (max-width: 766px) { 
    /* css for tablet */ 
}

Quelle

2016-10-16 08:15:31 Devang

Danke für alle Antworten Jungs. Ich habe mein eigenes Problem gelöst. Es war so doof, wahrscheinlich, weil ich letzte Nacht müde war. Es waren nur die Klassennamen, die ich in "firstLarge.css" verwendet habe, die in first.html nicht übereinstimmen.

I verwendet <div class="informationContainer"> in dem HTML-Code und rief .information_container in "firstLarge.css".

Danke Jungs!

Quelle

2016-10-16 15:38:45

HTML5 Responsive Web Design mit CSS

Antwort

Verwandte Themen