2016-11-22 2 views
0

Je fais face au même problème depuis quelques mois. Si je définis des tailles ou des positions en pixels ou en unités EM, il est traduit différemment sur différents écrans et résolutions dans les mêmes navigateurs. Par exemple - J'ai Dell afficher 24 "1920x1080pixels et mon collègue a 24" écran plus ancien Dell avec une résolution de 1600x1200pixels. Le problème est que la même page Web est affichée différemment. Par exemple, quand je veux avoir deux boutons sur la même ligne sans ligne et que je mets la bonne largeur de pixel en CSS, donc ce n'est pas cassé sur mon écran, il est cassé sur l'affichage de mes collègues, donc je dois définir plusieurs pixels de moins de taille. La même chose pour les EM.Les pixels CSS/les unités em diffèrent sur les différents écrans

Un autre exemple:

enter image description here

Position absolue et je suis en utilisant la position droite négative de l'élément de l'avoir à côté de la barre de défilement. Sur mon ordinateur c'est bien, sur mon cahier de collègues c'est visible.

Quelle est la relation entre les unités et les tailles de pixels sur l'écran? Comment puis-je écrire en toute sécurité une feuille CSS dans CSS3 et HTML5 doctype pour avoir la bonne compatibilité sur toutes les résolutions?

Le même problème se pose avec les boutons/entrées de texte, lorsque j'utilise juste la taille de police et le remplissage pour définir la taille des boutons et des entrées. Il semble différent s'appuyer sur la résolution de l'affichage.

Merci pour votre aide!

Répondre

0

Vous devez utiliser une unité qui est par rapport à la fenêtre, comme vw and vh

0

em ou rem sont liés à la taille de la police définie pour la police en cours. Avez-vous la taille de police définie pour le corps?

A lire également ce http://www.w3schools.com/cssref/css_units.asp

+0

Donc, la meilleure pratique serait d'avoir pixel du corps de taille-taille de la police et après que l'aide d'unités em ou unités de rem pour toutes les positions, tailles, marges, rembourrages? –

+0

Je dis juste que si vous avez votre propre CSS, vous devez définir la taille de police pour le corps en px, sinon si vous avez Bootstrap ou Foundation gardez à l'esprit qu'ils définissent une taille de police par défaut de 16px donc 1em/1rem être 16px. –

+0

Donc, si je comprends bien - l'utilisation d'unités non relatives n'est pas bonne, car il existe différentes façons de calculer les unités de pixels absolus, il est donc important d'utiliser des unités relatives pour obtenir le même résultat sur différents périphériques/Il est important d'avoir la taille de police en pixels définie par défaut pour l'élément racine. Les unités Rem sont relatives à l'élément parent et non à l'élément racine de la page entière. Et mentionner bootstrap est bon aussi bien qu'une inspiration. –