travelI'm on Holidays until the 21th august.

The questions posted during this period will receive no answer, so please be patient and wait before posting in the forum. Thank you

New registrations are suspended during this period

Je suis en vacances jusqu'au 21 aout.

Je ne répondrai à aucune question postée durant cette période. Merci d'attendre mon retour. Merci

Les inscriptions sur le site sont suspendues pendant cette période

 

Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Utilisation des rem

Utilisation des rem 29 Apr 2020 07:53 #56074

  • micker
  • micker's Avatar Topic Author
  • Offline
  • Platinum Boarder
  • Platinum Boarder
  • Posts: 689
  • Karma: 1
  • Thank you received: 21
hello je bosse actuellement un designer UX .... figma et consort ... pas évident de coller les approches
il me demandes de calculer les police en rem en donnant
- police mobile 14px
- police desktop 18px
puis apres il me fait sa table complette ...
h1 3.33 rem
h2 2.67 rem
...
C'est quoi la meilleure approche dans tck (sachant que je le couple avec pbck)
Merki

Please Log in to join the conversation.

Utilisation des rem 29 Apr 2020 07:57 #56075

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23185
  • Karma: 427
  • Thank you received: 2918
Salut
dans TCK ou PBCK tu peux utiliser des unités en "rem", il suffit de le spécifier dans le champ, ex : '3.33rem"
après tu fais comme tu veux, il y a tellement de solutions
CEd
Joomlack Webmaster and Developer

Please Log in to join the conversation.

Utilisation des rem 29 Apr 2020 07:57 #56076

  • micker
  • micker's Avatar Topic Author
  • Offline
  • Platinum Boarder
  • Platinum Boarder
  • Posts: 689
  • Karma: 1
  • Thank you received: 21
oui mais comment tu hierachise la prise en compte ? le rem part de la typo en body ?

Please Log in to join the conversation.

Utilisation des rem 29 Apr 2020 08:08 #56077

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23185
  • Karma: 427
  • Thank you received: 2918
est-ce vraiment une question relative à Template Creator CK ? ;)
Google est ton ami sur ce coup là
www.google.fr/search?sxsrf=ALeKk02GzMDjx...=utilisation+css+rem

globalement faut tout mettre en rem, et sur la racine du document tu mets une valeur qui sera la base du calcul
tu peux donc simplement changer la valeur sur la racine du document et tout se mettra à jour en rapport avec la valeur
Joomlack Webmaster and Developer

Please Log in to join the conversation.

Utilisation des rem 29 Apr 2020 08:17 #56078

  • micker
  • micker's Avatar Topic Author
  • Offline
  • Platinum Boarder
  • Platinum Boarder
  • Posts: 689
  • Karma: 1
  • Thank you received: 21
ok
=> ce que j'essai de voir c'est comment je peu l'intégrer au mieux dans mon modèle et optimiser tck
donc en soit si je comprend bien
dans le template pour la partie body je met ma taille de ref exemple 18px puis dans la gestion du responsive dans le custom code 14px
puis je deploie mes rem dans les options
ca te semble logique ?

Please Log in to join the conversation.

Utilisation des rem 29 Apr 2020 08:20 #56079

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23185
  • Karma: 427
  • Thank you received: 2918
oui ça me semble logique. La logique c'est pas template creator qui la définit, c'est la réglementation W3C CSS
Joomlack Webmaster and Developer

Please Log in to join the conversation.

Utilisation des rem 29 Apr 2020 08:30 #56080

  • micker
  • micker's Avatar Topic Author
  • Offline
  • Platinum Boarder
  • Platinum Boarder
  • Posts: 689
  • Karma: 1
  • Thank you received: 21
ok je vais checker tout ca !
d'ailleur ca me donne une idée
un peu comment sur pbck
la gestion des typo en fonction des resolution dans le responsive deign (body, h1=>h6)
sinon tout roule

Please Log in to join the conversation.

Utilisation des rem 03 Jul 2020 18:59 #57077

  • micker
  • micker's Avatar Topic Author
  • Offline
  • Platinum Boarder
  • Platinum Boarder
  • Posts: 689
  • Karma: 1
  • Thank you received: 21
hello je reviens sur ce poste j'ai integré les rem comme dans nos echanges ... mais il semble que l'adaptation en mobile ne fonctionne pas bien sur mes titres
exemple ici
www.cocoonauto.fr/

Par exemple sur un H1 3.33rem on devrait avoir : Sur desktop 3.33 x 18 => 60px Sur mobile 3.33 x 14 => 46,62px
Or on a actuellement desktop => 53 px Mobile => 53 px
La valeur en rem est OK mais la valeur rendue en PX n'est pas bonne.

tu aurais une idée de mon erreur ?
Merci par avance

Please Log in to join the conversation.

Utilisation des rem 04 Jul 2020 18:09 #57081

Salut


Je viens de me lancer dans les valeurs rem pour mon site également (caravane-camping-be)

Pour ce faire, j'ai mis dans responsive design (d'après mes différentes lectures)
ordinateur
html { font-size: 62.5%; }
tablette
html { font-size: 56.25%; }
Mobile
html { font-size: 50%; }

Pourquoi en % car cela permet pour un affichage sur ordinateur d'avoir 1rem = 10 px
car la taille de la police de base est de 16px

si je fais 10 px / 16px, j'obtiens 0.625

Après, je détermine le % pour les tablettes et les mobiles.

si tablette 9px donc 9/16 = 56,25%
si mobile 8 px donc 8/16 = 50%
Après il suffit de mettre une valeur en rem pour h1, h2, h3 identique pour ordinateur, mobile
par exemple pour

H1= 1.8rem car dans mon exemple = 1.8 * 10 (taille de base) = 18px
H2= 1.5rem car dans mon exemple = 1.5 * 10 (taille de base) = 15px

La taille sera ajustée en fonction de ce que tu as mis dans responsive design
par exemple
H1 ordinateur = 1.8 *10 = 18px
H1 mobile = 1.8* 10* 0.5 = 9px


Je ne sais si c'est correct ou bien expliqué mais cela fonctionne assez bien.

Please Log in to join the conversation.

Last edit: by carabao.

Utilisation des rem 06 Jul 2020 06:33 #57087

  • micker
  • micker's Avatar Topic Author
  • Offline
  • Platinum Boarder
  • Platinum Boarder
  • Posts: 689
  • Karma: 1
  • Thank you received: 21
théoriquement pas besoins de mettre des % .... non ?

Please Log in to join the conversation.

  • Page:
  • 1
  • 2
Time to create page: 0.269 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 283 guests and no members online