web-dev-qa-db-fra.com

cSS pour différentes résolutions d'écran?

Si je vérifie html sur 2 systèmes différents avec des résolutions différentes , la vue est déformée.

Existe-t-il un moyen de calculer la largeur et la hauteur de l'écran au moment de l'exécution?

je manque d’expérience avec css mais j’ai fait quelques recherches et trouvé à propos de:

https://css-tricks.com/css-media-queries/

mais là, ils suggèrent différentes classes (si je ne me trompe pas)

Ma question est-il possible d'obtenir la hauteur et la largeur au moment de l'exécution et d'utiliser un seul fichier CSS?

quelque chose comme :

.view {
min-width :"some how gets computed:which device we are using ?"
min-height :"some how gets computed:which device we are using ?"
}
htmlcssmedia-queries
5
lesnar

Les demandes de média sont un bon choix pour votre problème. 

Vous n'avez pas à utiliser différentes classes pour ces fonctions, vous devez simplement définir un comportement différent en fonction de la résolution.

Vous pouvez connaître la hauteur et la largeur de l'écran en Javascript, mais avec CSS, je ne pense pas que ce soit possible. Le mieux que vous puissiez faire avec css est de définir la gamme de périphériques comme dans Mobiles, Tablettes, Ordinateurs portables, Périphériques à très grand écran et en fonction des requêtes multimédia, vous pouvez définir ce que fait une classe sur certains types de périphériques.

Regardez un exemple ci-dessous:

/* For Mobile */
@media screen and (max-width: 540px) {
    .view {
        width: 400px;
    }
}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px) {
    .view {
        width: 600px;
    }
}

Les dimensions réelles peuvent varier selon votre cas.

C'est la même méthode que de nombreux frameworks pour implémenter la réactivité.

12
Kapil Soni

Vous pouvez combiner différents attributs dans une requête multimédia unique. Cet exemple appliquera ces styles à tous les écrans d'une largeur d'au moins 500 pixels et d'une hauteur d'au moins 400 pixels:

@media all and (max-width: 500px) and (min-height: 400px) {
  body {
    background: #ccc;
  }
  .someclass {
    padding: 10px;
  }
}
1
Māris Kiseļovs

Nan. ils ne suggèrent pas des classes différentes. Avec les requêtes multimédia, vous pouvez définir différentes règles CSS en fonction de la résolution de l'écran (ou du média) (largeur, hauteur, rapport d'aspect, etc.) dans un seul fichier ou vous pouvez inclure différentes feuilles de style en fonction de la requête.

Je vous suggère de suivre un tutoriel pour commencer à utiliser les requêtes des médias.

1
GiuServ