suchen

Heim >Web-Frontend >js-Tutorial >JS implementiert einfachen Code für die Reaktionsfähigkeit

JS implementiert einfachen Code für die Reaktionsfähigkeit

PHPz
PHPzOriginal
2017-04-03 15:33:382296Durchsuche

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

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 . 

93f0f5c25f18dab9d176bd4f6de5d30e　　a80eb7cbb6fff8b0ff70bae37074b813　　b2386ffb911b14667cb8f0f91ea547a7响应式的演示6e916e0f7d1e588d4f442bf645aedb2f　　36cd3b2ddc05fe575a9951c3bb566f83　　0138a88b79d3bacb8491d5e7d7e27258　　4c41bd30c55f798d965853cf38c818f4　　8019067d09615e43c7904885b5246f0a　　　　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";

　　　　　　}

　　　　}

　　2cacc6d41bbb37262a98f745aa00fbf09c3bca370b5104690d9ef395f2c5f8d1

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Mobiles Terminal – reaktionsfähig, rem/em, unter Verwendung von Js, um die Anpassung mobiler Terminals dynamisch zu implementierenNächster Artikel：Mobiles Terminal – reaktionsfähig, rem/em, unter Verwendung von Js, um die Anpassung mobiler Terminals dynamisch zu implementieren

In Verbindung stehende Artikel

Mehr sehen