JS implementiert einfachen Code für die Reaktionsfähigkeit-js-Tutorial-php.cn

JS implementiert einfachen Code für die Reaktionsfähigkeit

PHPz

Freigeben： 2017-04-03 15:33:38

Original

2273 Leute haben es durchsucht

1. CSS zur Implementierung von Reaktionsfähigkeit

CSSDie Implementierung von Reaktionsfähigkeit basiert hauptsächlich auf CSSMedienabfragen:

Eine Medienabfrage besteht aus einem optionalen Medientyp und null oder mehr Ausdrücken, um den Umfang des Stylesheets mithilfe von Medienattributen einzuschränken ,Zum Beispiel : Breite, Höhe, Farbe. Medienabfragen in CSS3 ermöglichen das Rendern von Inhalten nur für einen bestimmten Bereich von Ausgabegeräten, ohne dass der Inhalt selbst geändert werden muss. Das heißt, bestimmen Sie die Bildschirmbreite durch Medienabfragen und laden Sie verschiedene CSSStylesheets

Der Code lautet wie folgt: Beachten Sie, dass es einen Standardwert geben muss Stylesheet ohne Medienabfragen, andernfalls gibt es beim Zugriff im IE8 kein Stylesheet.

<head>

　　<meta charset="UTF-8">

　　<title>响应式的演示</title>

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

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

　　<link rel="stylesheet" type="text/css" href="css/index980.css" media="screen and (min-width:980px) and (max-width:1200px)"/>

　　<link rel="stylesheet" type="text/css" href="css/index640.css" media="screen and (min-width:640px) and (max-width:980px)"/>

　　<link rel="stylesheet" type="text/css" href="css/index320.css" media="screen and (max-width:640px)"/>

</head

Nach dem Login kopieren

2. JS zur Umsetzung von Reaktionsfähigkeit

JSResponsive Implementierung Es auch basiert auf der externen Verbindung verschiedener CSS-Stylesheets und lädt selektiv verschiedene CSS-Stile, indem die Bildschirmbreite verschiedener Geräte ermittelt wird .

<head>　　<meta charset="UTF-8">　　<title>响应式的演示</title>　　<link rel="stylesheet" type="text/css" href="css/reset.css" />　　<link rel="stylesheet" type="text/css" href="css/index1200.css" />　　<link rel="stylesheet" href="" id="rwdlink" />　　<script type="text/javascript">　　　　var rwdlink = document.getElementById("rwdlink");

　　　　setCSS();

　　　　window.onresize = setCSS;

　　　　function setCSS(){

　　　　　　var windowWidth = document.documentElement.clientWidth;

　　　　　　if(windowWidth >= 1200){

　　　　　　　　rwdlink.href = "";

　　　　　　}else if(windowWidth >= 980){

　　　　　　　　rwdlink.href = "css/index980.css";

　　　　　　}else if(windowWidth >= 640){

　　　　　　　　rwdlink.href = "css/index640.css";

　　　　　　}else{

　　　　　　　　rwdlink.href = "css/index320.css";

　　　　　　}

　　　　}

　　</script></head>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonJS implementiert einfachen Code für die Reaktionsfähigkeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!