+ Rispondi al Thread
Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Media Queries @media: come impostarle per gli smartphone

  1. #1
    UGoldrake non è in linea Scolaretto
    Post
    340

    Media Queries @media: come impostarle per gli smartphone

    Ciao a tutti,
    sto impazzendo per impostare le media queries per la visione di un sito su smartphone.
    Lo smartphone con cui faccio le prove ha dimensioni 480x800.

    Per ora le ho impostate in quest'ordine:
    1) @media only screen
    2) @media screen and (min-width: 481px) and (max-width: 680px)
    3) @media screen and (max-width: 480px)

    La condizione in mezzo mi serve come transito su screen dalla totale alla minima.
    La terza condizione è quella che mi interessa:
    L'ho impostata sia con screen, sia senza screen, ma dà sempre lo stesso risultato.
    Su screen funziona bene, eccetto il footer che lo mette a metà pagina.
    Su smartphone sia portrait che landscape mi visualizza il sito come se si trovasse nella seconda condizione: posso capire orizzontale ma perché anche verticale?
    Ho appositamente messo 680 invece di 800 per forzare il sistema a funzionare in verticale, se l'avessi messo 800 (come ho provato a fare) avrei avuto dubbi sul funzionamento, ma non è servito, perché i dubbi rimangono.

    Il sito è abbastanza ben organizzato:
    un div container con all'interno 3 div, colonna sx, centrale e dx, in fondo a tutto, fuori dal div container e anche dal body il footer.
    Le tre media queries spostano i div colonne una sotto l'altra e non fanno altro che riguardi la locazione degli elementi.

    Avete suggerimenti?
    Grazie.
    Ugo

  2. #2
    UGoldrake non è in linea Scolaretto
    Post
    340
    Scusate se ripeto la domanda, nessuna idea del perché non riesca a fargli leggere il CSS nella maniera giusta?
    Grazie.
    Ugo

  3. #3
    lisarko8077 non è in linea Novello
    Luogo
    Katerini, Greece
    Post
    10

    media query

    hai provato con questo:

    @media screen and (max-width: 480px o quello che credi) and (orientation: landscape) { ... }

    orientaion credo che faccia proprio quello di cui hai bisogno; poi dentro imposti il css come lo vuoi che sia in orizzontale
    Ultima modifica di lisarko8077; 06-10-2016 21:15  Motivo: errore nel codice fornito

  4. #4
    UGoldrake non è in linea Scolaretto
    Post
    340
    Ciao lisarko 8077.
    Grazie della risposta.
    Funziona come dici tu, ho solo messo portrait anziché landscape perché ho bisogno che funzioni in modo diverso su portrait, con max-width 480.
    Ciao.
    Ugo.

+ Rispondi al Thread

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi