remplacer balise avec une condition
Bonjour, je debute en javascript et je ne maitrise pas encore les bases des fonction.Jai effectué ce code pour que lorseque mon ecran atteint la taille de 625 px ou moins toute mes balise h1 deviennent h3 mais ça n'a pas l'air de bien marcher ,pouvez vous m'aider s'il vous plaît .
voici le code et merci d'avance :).
<script src="<?= WEBROOT; ?>js/jquery.js">
if (window.matchMedia("(max-width: 625px)").matches){
$('h1').each(function(){ var elemH1 = $(this);
elemH1.replaceWith('<h3>' + elemH1.text() + '</h3>');
});}
else {}
</script>
3 réponses
Pas de problème :D Content d'avoir pu aider :D, n'oublie pas de passer ton sujet en résolue, ou sinon si tu as d'autre question n'hésite pas :D
Bonjour,
Tu t'y prends mal, pour effectuer ce type d'opération tu peux utiliser les media queries en HTML / CSS, car avec cette méthode tu peux par exemple changer la taille de police en fonction de la taille de l'écran, tu peux masquer des éléments avec le display none etc..
Ce que tu veux faire on appel ça le reponsive, adapter ton design en fonction de la taille d'écran.
Tu as deux manière de procéder, soit tu défini une feuille de style différente pour chaque écran soit tu défini chacune de tes règles CSS en fonction de chaque écran dans ta feuille de style CSS principale.
Pour la méthode côté HTML elle est pratique dans le cas où tu souhaite bien séparer tes styles si tu dois en défini beaucoup, dans ce code on lui demande d'appliquer la feuille de style "smallscreen.css" tant que la largeur de l'écran ne dépasse pas les 640 pixels, et que l'écran est de media "screen", parfois tu peux définir différents type d'écran selon l'appareil qui va être utilisé
dans le cas d'un appareil de très petite taille (comme un téléphone) on va mettre ce media : handheld, pour un projecteur : projection, pour un téléviseur : tv, et si tu veux couvrir tous les cas de figure : all. Comme tu l'as vu on peut donc faire des espèce de condition, par exemple tu exiger qu'une feuille de style particulière ne s'applique uniquement quand la hauteur et la largeur de l'écran ne dépasse pas une valeur que tu auras défini, tout fonctionne donc avec le petit mot clé and :D
<link rel="stylesheet" media="screen and (max-width: 640px)" href="smallscreen.css" type="text/css" />Ensuite si tu veux que ton design rendent bien sur les téléphones et que tu n'ai pas cette impression de "dézoomé" tu peux également mettre cette balise dans ton head HTML :
<meta name="viewport" content="initial-scale=1, maximum-scale=1">Pour la méthode côté CSS elle est pratique dans le cas où tu n'en a pas beaucoup à définir (après tu peux très bien gérer tout ton responsive depuis une seule feuille de style, tant que toi tu t'y retrouve, ça n'a pas de réel importance)
Comme pour la méthode HTML on explique à notre code que le style défini en dessous ne devra être appliqué tant que la largeur de l'écran ne dépasse pas les 800 pixels de largeur.
@media screen and (max-width: 800px) {
.element{
/* Mon style */
}
}C'est quelque chose de laborieux, mais ça fonctionne. Si réellement tu as la flemme de corriger ton design sur chacune des plateformes possible (en précisant que tu n'est pas obligé d'appliquer un style pour chaque appareil, tu peux voir large, parfois ton style passe bien sous différents écrans), quelque chose qui peut également être utile couplé au media queries c'est les flexbox, car elles n'ont pas besoin de media queries pour gérer par exemple le positionnement de tes blocs. C'est quelque chose de plutôt efficace. Il te suffit juste de changer l'orientation des blocs en fonction de la taille d'écran.
Sinon il existe aussi les grid css, Grafikart a fait un tutoriel sur le sujet (je t'ai mis le lien en dessous) c'est une méthode un peu plus récente et moins laborieuse, elle implique cependant plus de chose à connaitre que pour les media queries.
Quelques liens qui pourrait t'aider
merci beaucoup Laznet d'avoir pris le temps de m'expliquer tout ça je vais utiliser les medias queries :)