Erstellung einer mobilen web-Seite mit verschiedenen css-Stil

Ich würde gerne wissen, wenn ich 3 verschiedene css-Dateien, wird der mobile browser des iPhone /iPad-download-alle 3 sets, css-Dateien, oder nur die eine, die relevant ist, die von der Display-Größe? durch die Nutzung dieser.

<link media="only screen and (max-width: 320px)" href="iphone-portrait.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-width: 321px) and (max-width: 480px)" href="iphone-landscape.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-device-width: 481px)" href="desktop.css" type="text/css" rel="stylesheet">

Habe ich die Antwort gefunden auf die Verwendung von http://www.w3schools.com/html5/html5_app_cache.asp

selbst wenn du 3 verschiedene css-Dateien für das mobile, mit css gespeichert, auf dem iphone, minimiert die Bandbreite nur 1 laden der die einzelnen css-und dies wird sich beschleunigen, die website, während Sie mit weniger Bandbreite.

erstellen .htaccess-Datei und platzieren Sie diese in.

AddType text/cache-manifest manifest

dann erstellen Sie eine andere Datei aufgerufen, was auch immer u wie die demo.manifest und in

CACHE MANIFEST 
# v0.0.1
icon.png
desktop.css
iphone-landscape.css
iphone-portrait.css

dann auf der html-Seite, die Sie haben, um es erklären, dies zu tun.

<html manifest="demo.manifest">

nachdem Sie update css-Dateien, müssen Sie nur aktualisieren Sie die demo.manifest und der browser mit dem herunterladen der neuen version der demo.manifest und alle Ihre Inhalte einmal mehr.

  • Ich denke, die Bildgröße ist abhängig von den Einstellungen der aktuellen Seite. I. e., wenn die Seite hat die Formatvorlage "erste.css - " und es ist für mobile Geräte, wird es gelesen. Btw, es lädt alle 3 Dateien.
  • Es hängt davon ab, die Methoden, die Sie verwenden, um die Versorgung der drei-stylesheets und der browser in Frage.
  • Ich denke, Sie sollten haben fragte sich eine andere Frage: wie würde auf der Erde assoziieren Sie eine bestimmte CSS-Datei, die eine bestimmte Bildgröße? HTML selbst hat keine Mittel, das zu tun! Müssen Sie die Verwendung von PHP / Javascript zu engagieren, die Art der bedingten Logik. As a side note, ich Neige dazu, lieber eine 'mobile-friendly' - Seite und lassen Sie das mobile Gerät, Griff die Anpassung des layout, anstatt die Programmierung für jede einzelne Art von Gerät.
  • Ich benutze <link media="only screen and (max-width: 320px)" href="iphone-portrait.css" type= "text/css" > definieren der css, und <link media="only screen and (min-width: 321px) and (max-width: 480px)" href="iphone-Landschaft.css" type= "text/css" > definieren Sie es in der Landschaft.
InformationsquelleAutor 4Rabbits | 2012-07-03
  1. 8

    Hier sind die media-queries von standard-Geräten (ab CSS-Tricks.com):

    /* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

    Alle Bereiche, die sagen, /* Styles */sind, wo Sie würde die separate CSS-Komponenten für die verschiedenen Geräte, die Sie unterstützen.

    **BITTE BEACHTEN Sie: dies ist eine ziemlich verworrene media query Blatt. Ich würde normalerweise löschen die Landschaft Zeug, und das iPhone media-query kümmert sich um die meisten smartphones, so dort ist normalerweise keine Notwendigkeit, zwei separate diejenigen für, die. Hier ist, was ich normalerweise verwende:

    /* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
    • dies ist nur wollte ich, eine Liste aller Dimensionen, Dankeschön.
    • Tolle snippet-codes. Wie würde ich die zweite version von dem code oben, um zu prüfen, ob es (IE10 || Andere Browser) oder - (WENIGER ALS IE10) wenn es-Desktops und-laptops?
    InformationsquelleAutor Mike Legacy
  2. 1

    Wenn Sie nennen Sie alle, Sie alle werden geladen. Der beste plan ist, media queries zu trennen, dienen aber dazu, alle Stile in einem Blatt.

    • OK, das ist jetzt eine Coole CSS3-feature, das ich nie kannte!
    • Ich bin mit <link media="only screen and (max-width: 320px)" href="iphone-portrait.css" type= "text/css" > wird sein, dass das nur die css geladen, wenn man Sie auf dem iphone im hochformat?
    • Browsern nicht konsistent auf diese ist - siehe: stackoverflow.com/questions/6311235/...
    InformationsquelleAutor Dave Everitt
  3. 0

    Wird der download alle von Ihnen, es sei denn, Sie erstellen einige javascript zu verhindern.

    • damit wird der download aller css?
    • Ja, es sei denn, Sie hindern es zu tun.
    InformationsquelleAutor dezman
Schreibe einen Kommentar