Case se souvenir de moi au login
2020-01-27
Et bien ils servent à
Voici un petit example si on veut faire disparaitre un élément sur les mobiles seulement, en CSS nous avons des classes, personnellement je crée une classe .notonmobile à display:none que je place dans une media query (voir plus bas)
Voici l'élément que je veux faire disparaitre sur les mobiles par example ce div
<div>élément à faire disparaitre</div>
Je vais lui ajouter ma classe.
<div class="notonmobile">élément à faire disparaitre</div>
Ensuite je définis cette classe dans une medias query qui cible les écrans de 1000px et moins donc dans mon fichier css :
@media only screen and (min-width : 1px) and (max-width : 1000px) {
.notonmobile{
display: none;
}
}
De cette façon mon div ne s'affichera pas sur les mobiles et les tablettes, facile non ?
Voici un example:
Le div est disparu sur les mobiles.
le code au complet :
<!DOCTYPE html>
<html>
<body>
<?php include 'header.php';?>
<style>
@media only screen and (min-width : 1px) and (max-width : 1000px) {
.notonmobile{
display: none;
}
}
</style>
<div class="container">
<div class="notonmobile">élément à faire disparaitre</div>
</div>
<?php include 'footer.php';?>
</body>
</html>
Visitez ce site pour voir les medias queries de tous les appareils si vous voulez en cibler un en particulier:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Sinon vous pouvez créer vos propre medias queries , ex: J'ai un bug d'affichage dans mon menu lorsque je rapetisse mon navigateur avec la souris, donc ce bug sera probablement présent sur les mobiles! Nous devons corriger ça.
1- Je vais sur ce site pour connaitre la grandeur de mon écran la ou le bug se produit.
2- je crée une medias queries dans mon fichier css comme ceci
@media only screen and (min-width : 1px) and (max-width : 573px) {
#topmenu{
margin-top:50px;
}
}
Vous comprenez le principe.
CATEGORIES
css
1hebergement
1php
3seo
1wordpress
3