Come rendere un testo fluido
Author: Salvatore M.
Visited 1457,
Followers 1,
Shared 0
ho notato che Per rendere il testo fluido dovremmo abbandonare i pixel ed utilizzare le misure relative ems per due buoni motivi: primo perché ci permette di superare i problemi di IE con i font settati in px;
Secondo perchè con questa operazione il testo diventa fluido, cioè si adatta alla larghezza del contenitore
facciamo un esempio del layout fisso settando il font a 16px; per trasformarlo in misura relativa, settiamo il testo nel “body” al 100% in modo che tutti gli elementi della pagina possano essere considerati in maniera relativa rispetto alla misura di default del browser che di solito è di 16px
come possiamo applicarlo alla versione websitex5 Pro v13.1
Posted on the
Buongiorno Salvatore,
purtroppo automaticmanete non è possibile. Riducendo la finestra del browser se hai settato il mobile noterai che nell'ultimo breackpoint il testo si adatta già alla finestra e la cella si riduce. Per le altre visualizzazioni invece devi sempre settare una dimensione fissa così che le celle si adattino a quella risoluzione.
Puoi però provare a inserire degli script o codice personale per realizzare quello che dici, setta il topic come pubblico così da ricevere maggiori informazioni che a da altri utenti della community.
Author
Buongiorno Riccardo,
come faccio a settare una dimensione fissa
leggi il consiglio di KolAsim qui:
https://helpcenter.websitex5.com/en/post/157034#comment1
Author
Buongiorno
ho provato ma non funziona
<style> @media screen and (max-width: 719px) { * {font-size:12px !important;} } </style>
pannello Esperto | codice personalizzato | prima della chiusura di HEAD
... hai personalizzato i valori...?...
...!... LINK ...?...
.
Author
Si ho personalizzato i valori
Scusami KoAsim
come faccio a creare un link per un sito non finito se me lo spieghi gentilmente
ti ringrazio e ne farò sempre uso
... quando sperimenti, dovresti pubblicare le tue prove in rete per una verifica reale, coma fanno per la maggiora altri utenti, prendendo per esempio uno spazio web su altervista, oppure esportando in una sotto directory del sito che si ha in uso...
... senza vedere, tutto può essere, specialmente quando di stratta di personalizzazioni extra dal programma...
.
Author
ok Grazie!!
provo con altervista
Author
ma una domanda nel frattempo... questa stringa e giusta così
<style> @media screen and (max-width: 719px) { * {font-size:12px !important;} } </style>
o devo aggiungere dell'altro
... sì, ... da inserire nel pannello ESPERTO /HEAD
... dovrebbe attivare la modifica per tutti i testi della pagina, sotto alla larghezza di 720 pixel, e rendendoli tutti uguali a 12px
... i valori di larghezza li puoi rendere congrui al breakpoint che vuoi considerare, e la misura del font la puoi diminuire o aumentare per quel che serve a te...
... per provare basta un click, riduci la finestra del browser e vedi cosa accade nella pagina...
.
Author
Si funziona grazie!!!
Author
Buongiorno grazie ancora KolAsim
e se desidererei diverse dimensioni di carattere per ogni dimensione di struttura
<style> @media screen and (max-width: 719px) { * {font-size:12px !important;} } </style>
<style> @media screen and (max-width: 599px) { * {font-size:10px !important;} } </style>
<style> @media screen and (max-width: 479px) { * {font-size:9px !important;} } </style>
le stringhe sono giuste così?
... si, OK; dovrebbero corrispondere ai vari breakpoint, e potresti raggrupparli così:
<style>
@media screen and (max-width: 719px) { * {font-size:12px !important;} }
@media screen and (max-width: 599px) { * {font-size:10px !important;} }
@media screen and (max-width: 479px) { * {font-size:9px !important;} }
</style>
... considera che l'occhio umano è sempre lo stesso, e tu riduci il punto font col rimpicciolirsi della finestra...
.
Author
Grazie per l'aiuto KolAsim
Buona giornata!
Author
Buongiorno KolAsim
e se vorrei che il contenuto della pagina possa avere una dimensione diversa del Footer
ad esempio nel contenuto della pagina 12px nel Footer 8px
posso usare la stessa stringa e raggrupparli così?
<style>
@media screen and (max-width: 719px) { * {font-size:12px !important;} }
@media screen and (max-width: 599px) { * {font-size:10px !important;} }
@media screen and (max-width: 479px) { * {font-size:9px !important;} }
</style>
... se il tuo footer si chiama imFooter ... e lo vuoi escludere, ... forse! prova così:
<style>
@media screen and (max-width: 719px) { *:not(#imFooter) {font-size:12px !important;} }
@media screen and (max-width: 599px) { *:not(#imFooter) {font-size:10px !important;} }
@media screen and (max-width: 479px) { *:not(#imFooter) {font-size:9px !important;} }
</style>
.
Author
Cosa vuoi dire con la frase ....."se il tuo footer si chiama imFooter"
cmq Così non funziona non ho imFooter
...allora metti il link del sito online ...
...cosa che sarebbe da fare sempre per essere aiutati meglio ...
... se non funziona, usa altre regole a seguire, oppure fanne a meno...
... senza programma di più non posso immaginare...
.
Author
Buongiorno Claudio
Come vedi dal mio profilo non ho molta esperienza non so come postare il sito online senza cancellare quello originale
ho provato come dice KolAsim a prendere uno spazio web su altervista, ma non so come postare il mio sito provvisoriamente per testarlo
o provato anche ad esportare in una sotto directory del sito che e in uso... avevo creato la cartella test
ma non so come arrivarci perchè mi da pagina irragiungibile, scusatemi per la mia ignoranza ma non so come fare
se gentilmente non mi spiegate passo passo...ho provato anche a documentarmi su internet per come fare ma non mi dà le risposte che desidro, Sicuramente sbaglio io
Author
Buongiorno!
KolAsim e Claudio D.
sono riuscito a pubblicarlo su altervista
ecco il link
http://carfast66.altervista.org/
i problemi compaiono quando riduco sotto 719 px i consigli di KolAsim sono molto buoni per mantenere il testo del
Footer fisso.. ma riduce anche il testo della pagina che dovrebbe rimanere leggibile anche se leggermente ridotto
... come detto inizialmente, riguarda tutta la pagina...
.
Author
si ok ho capito KolAsim
spero che con le prossime release mettono a posto la gestione carattere
separata in base ai vari breakpoint...
Grazie per l'aiuto
...non è una cosa da "correggere" ... se vuoi puoi farne richiesta come aggiunta per le prossime versioni aprendo un nuovo post di tipo "IDEA"
Author
ci sono riuscito era solo da modificare il file
originale non funzionava
@media screen and (max-width: 719px) { *:not(#imFooter) {font-size:12px !important;} }
modificato funziona
@media screen and (max-width: 719px) { *:yes(#imFooter) {font-size:12px !important;} }
Author
si lo so volevo dire che sarebbe una cosa da aggiungere alle nuove versioni
ok grazie anche a te Claudio D.
Consiglio di dare un'occhiata ai selettori CSS attuali, :yes() non esiste.
Author
lemonsong
grazie per la correzzione!!
Author
Buongiorno
Ora il sito con questi problemi si trova all'indirizzo
www.extrogrillcafe.it
Se avete consigli o suggerimenti...vi ringrazio anticipatamente.
Buona giornata