Kann ich ändern, welche CSS-Datei in Abhängigkeit von der Höhe des Browsers geladen wird?
Zum Beispiel, wenn der Browser weniger als 600px ist, dann verwenden Sie index_sm.css, aber verwenden Sie index_lg.css sonst.
Antworten
Zu viele Anzeigen?
Innerhalb Ihres <head> Tags den folgenden Text ein:
<script type="text/javascript">
if (window.innerHeight <= 600) {
loadcss('index_sm.css');
} else {
loadcss('index_lg.css');
}
function loadcss(file) {
var el = document.createElement('link');
el.setAttribute('rel', 'stylesheet');
el.setAttribute('type', 'text/css');
el.setAttribute('href', file);
document.getElementsByTagName('head')[0].appendChild(el);
}
</script>
Olokoo
Punkte
1114
Dies ist die beste Antwort, die ich finden konnte. Ich habe sie schließlich durch Zufall auf einer sehr hilfreichen Website gefunden.
function adjustStyle(width) {
width = parseInt(width);
if (width < 701) {
$("#size-stylesheet").attr("href", "css/narrow.css");
} else if ((width >= 701) && (width < 900)) {
$("#size-stylesheet").attr("href", "css/medium.css");
} else {
$("#size-stylesheet").attr("href", "css/wide.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});Der Standort ist: http://css-tricks.com/6206-resolution-specific-stylesheets/
Die jQuery ändert den Browser css on the fly so, wenn Sie re Größe Ihres Browsers die css Änderungen. Es funktioniert auch in allen Browsern.
Quentin
Punkte
850700
Unter unterstützende Browser können Sie verwenden Mediaabfragen (insbesondere die Höhe Medienmerkmal ).
marcocamejo
Punkte
798
Sie können Media Queries verwenden, wie Quentin sagte. Aber ich denke, Sie haben bereits die n css-Dateien und wollen eine von ihnen on fly auswählen. Verwenden Sie einfach etwas wie dieses in Ihrem Dokument Kopf.
<script language="text/javascript">
if (screen.width == 640) {
document.write('<link rel="stylesheet" type="text/css" href="640.css">');
}
else if (screen.width == 800) {
document.write('<link rel="stylesheet" type="text/css" href="800.css">');
}
</script>
