Maison > Article > interface Web > JS implémente un code simple pour la réactivité

JS implémente un code simple pour la réactivité

PHPzoriginal: 2017-04-03 15:33:382248parcourir

1. CSS pour mettre en œuvre la réactivité

CSSLa mise en œuvre du réactivité s'appuie principalement sur CSSRequêtes média :

Une requête média se compose d'un type de média facultatif et de zéro ou plusieurs expressions pour limiter la portée de la feuille de style à l'aide des attributs de média ,Par exemple : largeur, hauteur, couleur. Requêtes multimédias en CSS3 permettent de restituer le contenu uniquement pour une gamme spécifique de périphériques de sortie sans avoir à modifier le contenu lui-même. Autrement dit, déterminez la largeur de l'écran via des requêtes multimédias et chargez différentes feuilles de style CSS

Le code est le suivant : Notez qu'il doit y avoir une valeur par défaut feuille de style sans requêtes multimédias, sinon il n'y aura pas de feuille de style lors de l'accès dans IE8.

<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 pour implémenter la réactivité

JSImplémentation réactive Il également. s'appuie sur une connexion externe de différentes feuilles de style CSS et charge sélectivement différents styles CSS en obtenant la largeur d'écran de différentes surfaces d'appareils. .

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Terminal mobile - réactif, rem/em, utilisant Js pour implémenter dynamiquement l'adaptation du terminal mobileArticle suivant：Terminal mobile - réactif, rem/em, utilisant Js pour implémenter dynamiquement l'adaptation du terminal mobile

Articles Liés

Voir plus