web-dev-qa-db-fra.com

Changer CSS uniquement pour les appareils mobiles?

Je viens de terminer la création de mon site Web, mais maintenant, j'ai constaté un échec. Mon problème est que mon site Web a l'air totalement Nice sur le PC. Mais si je le regarde à partir de mon téléphone portable, les espaces entre certaines images, etc. sont beaucoup trop ...

Ma question est donc la suivante: comment créer des codes CSS qui n’affectent que les appareils mobiles et peut-être les tablettes?

Y a-t-il un moyen?

htmlcssmobileweb
3
Jan

CSS a une fonctionnalité appelée requêtes multimédia . À partir du lien MDN:

Les requêtes multimédia, ajoutées dans CSS3, permettent d'adapter la présentation du contenu à une gamme spécifique de périphériques de sortie sans avoir à modifier le contenu lui-même.

Par exemple:

div {
    background: black;
}

@media (max-width: 1000px) {

      div {
            background: yellow;
       }

}

La couleur de fond de cette div sera jaune à l'écran sous une largeur de 600px.

4
Eyal Cohen

Vous pouvez utiliser des requêtes de support pour différentes résolutions d'écran. Exemple - 

#image img {
    width:375px;
}
@media screen and (min-width: 1366px) {
    #image img {width:375px;}
}
1
Purvil Bambharolia

Lire et comprendre à propos de Media Queries

Vous serez en mesure d'ajuster le css de certaines tailles de média de votre site web.

0
Joseph Vu