Vai al contenuto principale

WordPress Responsive design con la regola @media CSS3

Divi: il tema WordPress più semplice da usare

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Notando il crescente utilizzo di dispositivi mobili, dalla fine di aprile 2015 Google ha penalizzato i siti web le cui pagine non sono pronte per il mobile. Di conseguenza, per il tuo SEO, devi assicurarti che il tuo sito web sia visualizzato in modo decente sia su schermi grandi che su quelli più piccoli.

progetta media reattivi wordpress css3

In questo articolo, ti mostrerò come puoi mettere il tuo sito Web nella pagina usando la regola @media di CSS3.

È importante notare che i termini "reattivo" e "compatibile con i dispositivi mobili" sono spesso usati in modo intercambiabile nonostante la differenza nel loro significato reale. Capire cosa significa ciascuno è importante per essere in grado di garantire che il tuo sito web soddisfi i criteri necessari per adattarsi a schermi di tutte le dimensioni.

Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Quindi, torniamo al perché siamo qui.

Responsive e Mobile-compatibile

Siti Web che non lo sono né reattivo né cellulare compatibile, vengono visualizzati in modo identico su tutti gli schermi, ovvero la versione per schermi di grandi dimensioni viene visualizzata ovunque. Sugli schermi più piccoli, devi scorrere la pagina in orizzontale per vedere tutto il loro contenuto. Sono difficili da navigare su questi schermi. 

Scopri anche questi Plugin 8 WordPress per personalizzare l'aspetto del tuo sito web

Un sito Web è cellulare compatibile quando soddisfa solo il minimo indispensabile per essere visto sui dispositivi mobili, il che non lo rende un sito Web reattivo. Ad esempio, un sito Web può essere considerato compatibile con i dispositivi mobili se non è necessario navigare in orizzontale. Ciò fa sì che i suoi elementi diventino piccoli e indistinguibili. È quindi necessario ingrandire per leggere il suo contenuto.regola dei media di progettazione wordpress reattiva css3 2

Dalla loro parte i siti web di risposta si adattano perfettamente alle diverse dimensioni dello schermo. Ridefiniscono i loro elementi in modo che possano essere facilmente visti e utilizzati sugli schermi più piccoli. Questo è il tipo di design che desideri per il tuo sito web.

Vedi anche il nostro Plugin 10 WordPress per creare un modulo di prenotazione sul tuo sito web

Ora conosci la differenza tra cellulare reattivo e compatibile. Vedremo ora la regola @media CSS3 che ti consente di aggiornare il tuo sito Web per renderlo reattivo o per creare abbastanza facilmente temi WordPress con contenuti reattivi.

La regola @media di CSS3

Per rendere il tuo tema reattivo, avrai bisogno della regola @media di CSS3. Fondamentalmente, ti consente di definire gli stili che desideri utilizzare per un particolare tipo (dimensione) di schermo. Lo userai come un'altra regola CSS (con parentesi graffe) con l'unica differenza che si sovrappone ad altre regole CSS.

@media media-type (espressione) {css-test-selector {property1: value1; proprietà2: valore2; }}

In questa struttura gli elementi all'interno della regola @ dei media solo il lavoro quando la tipo-di-media specificato per essere stato rilevato con successo. Il tipo di supporto scelto, è possibile specificare le caratteristiche in termini di dimensioni.

regola dei media di progettazione wordpress reattiva css3 3Scopri Come applicare l'interfaccia e l'esperienza utente a WordPress

La regola @media rileva per te il tipo di schermo con cui viene visitato il tuo sito web e sceglie le regole che meglio si adattano a questo tipo di schermo. Tutti i principali browser hanno già integrato la regola @media.

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Ecco l'elenco per tua informazione: Chrome , Safari, Firefox, IE, Opera et bordo.

Definire le schermate di destinazione

Se vuoi modificare un tema WordPress esistente, crea una copia di backup del CSS di quest'ultimo in modo da poter tornare indietro se necessario.

Leggi anche il nostro articolo su Come caricare gradualmente i commenti di Facebook e Disqus

Come abbiamo visto nella sua struttura, per definire il tipo di schermo, è necessario inoltrarlo @media il tipo di schermo scelto come target. Ecco l'elenco dei diversi tipi di schermo:

- per tutti i nostri marchi storici : per tutti i tipi di schermi o per le dimensioni specificate in espressione
- schermo : per tutti gli schermi, mobili, tablet, laptop o desktop
- stampare : per le stampanti, se desideri stili specifici per le pagine che possono essere stampate
- discorso : per lettori di schermo, se desideri stili per non vedenti.

Ci sono anche operatori che puoi mettere prima del tipo di schermata; come non per visualizzare gli stili per le schermate di tipo diverso da quello specificato o - esclusivamente. per applicare gli stili solo a schermate specificate. Puoi quindi avere:

@media solo schermo

Definisci gli stili per le dimensioni dello schermo

È possibile utilizzare espressione per fornire dettagli sulle caratteristiche dello schermo. Dopo @media entrare che collaborano con noi, attingono direttamente dalla storia e dalla tradizione veneziana seguito dall'espressione. Se utilizzi più espressioni, dovrebbero essere tutte separate da che collaborano con noi, attingono direttamente dalla storia e dalla tradizione veneziana. Ecco un esempio della struttura:

@media only screen e (max-width: 640px) {selector-css-example {/ * Your usual CSS here * /}}

In questo esempio utilizzo max-width con un valore di 640px. Questo per impostare una larghezza massima dello schermo delle dimensioni di un iPhone o di un piccolo smartphone Android. Con questo tipo di struttura, hai il controllo sull'aspetto del tuo sito web su diversi dispositivi. Di seguito è riportato un elenco di proprietà relative alle dimensioni che puoi utilizzare espressione :

Scopri anche il nostro 8 SEO WordPress plugin per ottimizzare il SEO del tuo sito web

- min larghezza et max-width : rispettivamente la larghezza minima e massima richiesta per la visualizzazione degli stili contenuti nella regola @media. Un altro pixel e stili non vengono visualizzati.

- min altezza et max-height : rispettivamente l'altezza minima e massima richiesta per la visualizzazione degli stili contenuti nella regola @media. Poiché la maggior parte degli schermi sono progettati per srotolare le pagine in verticale, le proprietà min-height et max-height sono poco usati.

Di seguito è riportato un elenco delle dimensioni dello schermo per alcuni terminali:

- IPhone: 640px
- IPad: 1024px
- Tablet: 1366px
- Smartphone Android: 640px, 720px, 854px, 960px
- Android extra large: 1024px, 1066px
- Telefono Windows: 480
- Windows phone grande: 768px
- giovani e vecchi: 320px
- Ultrabook / laptop: 1366px
- Desktop e TV: 1920px

Ci sono molte altre proprietà che puoi usare espressione. Ad esempio, se scegli come target desktop o schermi televisivi in ​​grado di visualizzare immagini con proporzioni 16: 9, potresti utilizzare una struttura come questa:

@media only screen and (min-width: 1920px) and (device-aspect-ratio: 16/9) {selector-css-example {/ * Your usual CSS here * /}}

 Per elenchi ed esempi più completi, consultare w3schools et Mozilla sviluppatori.

Prova la funzionalità reattiva del tuo sito Web

Mentre modifichi o crei il tuo tema WordPress o alla fine se ti piacciono le sorprese, dovresti testare il risultato per vedere se alla fine è reattivo. Ricorda, Google sta cercando siti Web che non rispondono.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Vedi anche questi Plugin 10 WordPress per creare schede sul tuo blog

Non riuscendo a disporre di tutti i dispositivi mobili a cui ti rivolgi, ci sono (fortunatamente per le nostre borse) un buon numero di strumenti per vedere come il tuo sito web si adatta ai diversi schermi.

Direttamente nel browser del computer è possibile utilizzare Window Resizer Chrome Extension Browser, ResponsiveResize, ResizeMe ou Firesizer. Di seguito un'immagine di BlogPasCher nella vista Responsive Design che viene fornita di default con Firefox.

css3-media-firefox-reattiva-design-view

Esistono anche siti Web dedicati all'attività:

Responsivepx

css3-media-responsivepx

Questo sito web ha la particolarità di farti scegliere tu stesso le dimensioni dello schermo. Nota che questo sito web carica il tuo in un frame. Quindi, se il tuo tema WordPress è stato progettato per non essere visualizzato in una cornice, è possibile che quest'ultimo non venga visualizzato qui.

iPad Peek

https://blogpascher.com/wp-admin/post.php?post=60969&action=editcss3-media-ipad-peek

Questo sito web è utile per testare il tuo sito web sugli ultimi dispositivi Apple, iPad e iPhone. Basta inserire il tuo URL. Nota che è soggetto allo stesso problema di frame di responsivepx.

Phone Emulator mobile

css3-media-mobile-phone-emulatore

In questo sito web puoi testare il tuo su schermi piccoli e su vecchi modelli di telefoni che selezioni sul lato destro dello schermo. È inoltre possibile configurare alcune proprietà dello schermo.

Google Mobile amichevole di prova

Test css3-media-google-mobile-friendly

Questo è uno dei test più importanti, se non il più importante. Basta inserire il tuo indirizzo nella barra e fare clic su Analizzi i dati per iniziare il test. Dopo il test, lo strumento visualizza un report e un punteggio. Se il test è positivo, tanto meglio, non sarai penalizzato da Google.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Se non sei uno sviluppatore ti consiglio un elenco di temi WordPress reattivi per iniziare.

Risorse raccomandate

Scopri anche altre risorse consigliate che ti aiuteranno ad attrarre meglio i tuoi partner e abbonati, ma anche a migliorare la sicurezza del tuo sito web.

Conclusione

Ecco ! sai tutto quello che c'è da sapere su come rendere reattivo il tuo sito web o il tuo tema WordPress usando la regola @media di CSS3. Se ci siamo persi un tema WordPress che ti è caro o che preferisci, lascia un link nella sezione commentaires qui di seguito.

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ti invitiamo anche a condividi sui tuoi diversi social network.

...

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
4 azioni
quota4
Tweet
Enregistrer