JS implémente un code simple pour la réactivité-js tutoriel-php.cn

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

PHPz

Libérer： 2017-04-03 15:33:38

original

2207 Les gens l'ont consulté

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

Copier après la connexion

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. .

<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>

Copier après la connexion

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!