Insieme a web developer Umbria abbiamo provato a risolvere un quesito che é nello specifico: ma come faccio a ESCLUDERE alcuni elementi dalla visualizzazione del mobile? Va bene in primo luogo bisogna ripassare con Faraoni Enrico CEO di Umbriaway Consulting il concetto di risoluzione usando la nostra bibbia del web: la risoluzione indica il grado di qualità di un’immagine. In genere, si usa questo termine riguardo a immagini digitali, ma si può parlare di “risoluzione” anche con riferimento a qualunque fotografia o immagine trasferita o riprodotta su un determinato supporto mediante un processo di stampa, di visualizzazione, o di proiezione. La risoluzione grafica indica la quantità dei punti elementari di stampa (es. inchiostro) presenti in uno spazio lineare (1 centimetro, 1 pollice, etc.); in modo analogo, la risoluzione fotografica indica quella dei punti elementari di luce (es. pixel); in questo modo si misura la densità di un’immagine stampata o da proiettare. Le misure della risoluzione vengono fornite generalmente in dpi (dot per inch = punti per pollice), ppi (pixel per inch = pixel per pollice) e l/mm (linee per millimetro); ad esempio, 280 dpi corrispondono a 11 l/mm e rappresentano un valore medio (10/10) dell’acutezza visiva umana binoculare, alla distanza di 25 cm. Una fotografia 15×10 cm, osservata generalmente alla distanza di lettura (convenzionata a 25 cm), dovrà essere stampata almeno alla risoluzione di 280 dpi; la stessa immagine osservata a 250 cm di distanza, dovrà essere ingrandita 10 volte (10x) e la risoluzione di stampa potrà essere ridotta a 28 dpi….ok ad esempio verrebbe da chiedersi il mio samsung 5 NEO che risoluzione ha? Web developer Umbria poco cortesemente potrebbe rispondere: quelle indicate dal produttore sul manuale di accompagnamento del prodotto ossia 480 x 800 pixel, va bene e invece la risoluzione di un monitore che tela da dipingere mi presenta? Ad esempio 1980 per 1028. Deetto questo anche le nostre creazioni che hanno visualizzazioni diverse al loro interno hanno bisogno di essere gestite per una corretta visualizzazione su dispositivi voluti. Ad esempio all’ indirizzo http://www.farwebdesign.com/bookproject/ abbiamo una bella pagina che vista su dispositivo mobile usando un framework come bootstrap non ci darebbe problemi na che mostrerebbe in testa una serie di link cghe corrispondono alla barra laterale sinistra che non vorremmo vedere, cosa fare in questo caso per ESCLUDERE dalla visualizzazione del mobile quella classe=”list-group”? Bootstrap ci aiuta perché ha all’ interno delle sue soluzioni delle classi che servono a settare la visualizzazione per varie risoluzioni: classe col-lg (large) che porterà tutto di blocco sotto i 1200px di larghezza; classe col-md (medium) che porterà tutto di blocco sotto i 992px di larghezza; classe col-sm (small) che porterà tutto di blocco sotto i 768px di larghezza; classe col-xs (extra small) che non porterà mai la situazione di blocco ma manterrà sempre in linea. All’ indirizzo https://getbootstrap.com/docs/3.3/css/ web developer Umbria fa notare che si possono reperire importanti informazioni al riguardo. Ora il problema legato all’esempio specifico di progetto libri di Umbriaway Consulting é stato risolto traversalmente usando puro css senza le classi. Le interrogazioni multimediali sono utili quando si desidera applicare stili CSS specifici che dipendono dal tipo generale (ad esempio la stampa rispetto alla schermata), caratteristiche specifiche (come la larghezza della visualizzazione del browser) o l’ambiente (ad esempio condizioni ambientali) di un dispositivo. Poiché il numero e la varietà di dispositivi collegati a Internet continuano ad espandersi, le query multimediali stanno diventando sempre più importanti per costruire siti e applicazioni robuste. Tipi di supporto descrivono la categoria generale di un determinato dispositivo. Sebbene gli utenti siano generalmente in qualche tipo di hardware con uno schermo, ad esempio un computer desktop o uno smartphone, è possibile creare stili speciali che mirano a dispositivi più specializzati, quali stampanti o lettori di schermo audio. Tuttavia, poiché i tipi di supporti sono destinati a descrivere dispositivi in termini molto ampi, solo pochi sono disponibili. Per specificare gli attributi più specifici, è possibile utilizzare un’ampia varietà di funzioni multimediali. Le funzionalità multimediali descrivono le caratteristiche specifiche di un dato agente utente, dispositivo di output o ambiente. Ad esempio, è possibile applicare stili specifici per monitor a schermo intero, dispositivi che utilizzano topi o per condizioni ambientali in condizioni di scarsa illuminazione. Molte caratteristiche del supporto sono caratteristiche di gamma notifica web developer Umbria, il che significa che possono essere prefisso con “min-” o “max-” per esprimere vincoli “condizioni minime” o “condizione massima”. Ad esempio, questo CSS applica stili solo se la visualizzazione del tuo browser è uguale o più stretto di 12450 pixel:
@media (max-width: 12450px) { … }
se si crea una funzionalità di media senza specificare un valore, l’espressione risolve a true se il valore della funzionalità non è zero. Se una funzionalità multimediale non si applica al dispositivo su cui è in esecuzione il browser, le espressioni che coinvolgono la funzionalità multimediale sono sempre false. Ad esempio, la seguente query sarà sempre falsa:
@media only speech and (aspect-ratio: 11/5) { … }
Come al solito web developer Umbria segnala un link interessante per approfondire queste tematiche:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features
È possibile comporre complesse query multimediali utilizzando gli operatori logici, compresi quelli non e, e solo. L’operatore e l’operatore vengono utilizzati per combinare insieme più funzionalità multimediali in una singola interrogazione multimediale, che richiede che ciascuna funzionalità a catena venga restituita true affinché la query sia vera. L’operatore non è utilizzato per negare un’intera query multimediale. L’unico operatore è utilizzato per applicare uno stile solo se l’intera query corrisponde, utile per impedire ai browser più vecchi di applicare stili selezionati. Se si utilizzano gli operatori non o solo, è necessario specificare un tipo di supporto esplicito. È inoltre possibile combinare più query multimediali in un elenco separato da virgole; se una delle query multimediali nell’elenco è vera, l’intera istruzione media restituisce true. Questo equivale a un operatore oa un operatore.
AND
La parola chiave e le parole chiavi vengono utilizzate per combinare più funzionalità multimediali insieme a combinare le funzionalità multimediali con i tipi di supporti. Una query multimediale di base, una singola funzionalità multimediale con il tipo implicito di tutti i tipi di supporti, potrebbe essere simile a questa:
@media (min-width: 700px) { … }
Se, tuttavia, si voleva che ciò venisse applicato solo se il display è in orizzontale, è possibile utilizzare un operatore e un operatore per collegare insieme le funzioni multimediali:
@media (min-width: 700px) and (orientation: landscape) { … }
Ora la query media sopra riportata restituirà solo se la visualizzazione è larga 700px o larga e il display è in orizzontale. Se, tuttavia, voleste solo che questo si applicasse se il display in questione era del tipo di tipo TV, è possibile catene queste funzionalità con un tipo di supporto utilizzando un operatore e un operatore:
@media tv and (min-width: 700px) and (orientation: landscape) { …
In realtà qui con web developer Umbria abbiamo visto solo l’operatore logico AND ma l’uso é molto esteso e variegato e web developer Umbria consiglia di visionare articvoli come https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries per visionare nello specifico tutte le varie opzioni. Ritornando al caso dell’ applicativo libri menzionato da Umbriaway Consulting con il suo alias Faraoni Enrico la soluzione per l’esclusione della list group é stata la seguente. Prima abbiamo creato una media query con un range per i criteri di visualizzazione con i valori max e minimo e poi gli abbiamo detto tramite CSS tramite il selettore DISPLAY e la proprietà NONE di NON visualizzare l’elemento all’ interno di quel range ovviamente senza mettere in questo caso l’ID corrispondente sull’ elemento specifico che rimarrà invariato nelle sue UL / LI come struttura html mentre lo stile applicato sulla pagina root sarà:
<style>
@media (min-width: 200px) and (max-width: 520px) {
.list-group{ display:none;}
}
</style>
Una particolarità provando a linkare questo stile su un foglio esterno tramite il tag link e l’attributo src non sio ottiene lo stesso effetto e su questo potrebbero esserci varie soluzioni alla CSI o NCIS: ipotesi uno sbagli qualcosa, ipotesi due non fai la cosa giusta, ipotesi tre non sei stato attento oppure c’è una spiegazione tecnica che in questo caso web developer Umbria non vuole disquisire visto che l’applicativo libri contiene al suo interno anche libri di fantasmi? Ai poster …pardon posteri l’ardua sentenza! Certamente su questo tema delle risoluzioni e degli adattamenti a vari dispositivi c’è una vasta letteratura e il materiale di sicuro in rete non manca! Ricordiamo che un web developer Umbria autonomo e propositivo quando non ha la risposta e la soluzione a un problema se la va a cercare!
Be the first to comment