J'ai récemment livré une maquette Photoshop conçue pour un iPhone X. La résolution est 1125px x 2436PX @ 72PPI. J'essaie de convertir cela en CSS et je commence avec les polices.
Par exemple, le texte Texte de ma maquette est 60PT / PX. Lorsque j'utilise cela comme la forme de police CSS cependant, c'est Wayyy to Large. J'ai essayé de changer la taille de l'image dans Photoshop pour être 1125 x 2436 @ 458PPI dans l'espoir qu'il corrigerait la taille de la police mais la taille de la police ne change pas vraiment qui me déroule vraiment.
Quelqu'un peut-il me dire ce qui me manque ici?
3 Réponses :
Normalement, lorsque cela faisait cela, je ne passe pas par les tailles de police exactes données dans le PSD, car elles sont toujours légèrement éteintes et ne prennent pas de compte pour la page dynamique de la page et des conteneurs. Au lieu de cela, choisissez la taille de police la plus petite pour le PSD et définissez-la sous forme de taille de police par défaut de la page entière de la balise. Ensuite, faites tout le reste par rapport à cela (en EM, pas px), sur la base de leurs tailles relatives dans le PSD. De cette façon, vous pouvez terminer le reste de la page avec une taille de police approximative, puis revenir plus tard et ajuster la taille de la police unique après que ce soit le plus ressemblant à ce que vous avez rencontré dans le PSD.
Essayez d'attribuer la taille de la police à l'aide de PX, vous convertissez des polices en PX et EM ici https://www.joomlasdrilanka.com/web-design-development-blog/web-design-font-size-mesutions-convert-points-pixelsem-Plushpycinages-Web-Designing/
Vous pouvez sélectionner une couche de texte à partir de votre mokeUp. et cliquez avec le bouton droit de la souris sur ce calque texte, vous verrez plusieurs options, mais vous devez cliquer sur "Copier CSS". Ensuite, votre texte se convertira en CSS.
Par exemple:
Malheureusement, cela est basé sur le dimensionnement du PSD. Lorsque vous utilisez ces valeurs dans CSS, la taille de la police est trop grande.
iPhone X a un facteur de mise à l'échelle de 3. Vous pouvez donc constater que la division des valeurs par 3 vous donnera le résultat souhaité. Ce peut aider.
Votre commentaire m'a réellement eu le plus proche. J'ai été capable de faire échouer jusqu'à ~ 3x.