2017-04-27 3 views
-1

Ist es besser, Medien-Anfragen "@ media" in HTML, wieIst es besser, @media in HTML oder Stylesheet zu verwenden?

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 
selbst

oder in dem CSS-Stylesheet so zu laden?

Von dem, was ich weiß ist, dass beide unabhängig geladen werden, aber nur aktiviert werden, wenn die Bedingung gilt. Gibt es einen, der schneller und/oder vorzuziehen ist?

BEARBEITEN: Ich möchte ein globales Stylesheet für meine Website erstellen und denke darüber nach, Styles für verschiedene Seiten in verschiedenen Stylesheets zu trennen und frage mich, welche eine schnellere Ladezeit haben (mit den Medien im HTML- oder CSS-Stylesheet)

+0

Es ist immer gut, es innerhalb 'stylesheets' zu behalten, und dies ist eine rein auf der Meinung basierende Frage, die basierend auf dem obigen Grund abgewählt werden würde. –

Antwort

0

Es ist immer gut, @media in CSS zu behalten.

in HTML verwenden Sie können auch unterschiedliche Formatvorlagen für verschiedene Medien:

+0

Ist einer schneller als der andere? –

0

Vielleicht versuchen Sie, den Unterschied zwischen einem internen und externen CSS-Stylesheet

Interne CSS-Stylesheet

zu sehen
<head> 
    <style type="text/css"> 
    @media (max-width: 800px) { 
    ... 
    } 
    </style> 
</head> 

Externes CSS Stylesheet

<head> 
    <link rel="stylesheet" type="text/css" href="/support/style.css" /> 
</head> 

Interne und externe CSS sollten beim Erstellen einer Website berücksichtigt werden. Dadurch wird Ihre Seitengeschwindigkeit beeinträchtigt.

Sie müssen möglicherweise die Empfehlung von googleinsight lesen:

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

+0

Eigentlich entscheide ich nicht internes oder externes CSS Stylesheet. Ich denke eigentlich daran, ein globales Stylesheet für meine Website zu erstellen und denke darüber nach, ein weiteres Stylesheet hinzuzufügen und @media-Abfragen in einem separaten Stylesheet zu trennen und zu wissen, ob die Abfragen innerhalb desselben Stylesheets oder eines anderen Stylesheets betroffen sind Ladezeit –

+0

@william .. Natürlich wird es die Ladezeit beeinflussen .. Je mehr globale Dateien haben Sie die größere Menge an Zeit zu puffern. So viel wie möglich, sollten Sie kleinere Anzahl von Dateien dafür sicherlich beeinflussen. Dies basiert auf meiner Erfahrung mit der Beschleunigung meiner Website. Sie können dies auch überprüfen: http://dyn.com/blog/how-we-improved-page-speed-by-cleaning-css-html-and-images/ – smzapp

0

CSS rein basierend auf Code Wartbarkeit und robuste Implementierung. Stellen Sie sich vor, wenn Sie Folgendes tun wollen:

@media (max-width:768px) { 
    .bob{} 
} 

für 40 Elemente mit Klasse von bob - außerhalb eines Stylesheet das wäre schrecklich, zu beschäftigen.

Verwandte Themen