[CSS] Sito web responsive

[Patronus]

Salve. Ho iniziato a creare siti web circa 3 anni fa e ancora ho problemi con sto maledetto responsive design. La cosa che mi fa arrabbiare di più è che conosco come risolvere il problema (Media Queries) ma lo stesso non ci riesco -.-

Come faccio a creare un sito web responsive senza ridimensionare la finestra del browser e andare a tentativi? Dovrei fare una proporzione matematica? Ditemi voi quale tecnica D:

Inoltre, tenendo conto del codice che segue:

@media screen and (min-width: 1024px){ #playnow{margin-left: 440px !important;}}
@media screen and (min-width: 4096px){#playnow{margin-left: 1950px !important;}}
@media screen and (min-width: 931px){#playnow{margin-left: 390px !important;}}
@media screen and (min-width: 819px){#playnow{margin-left: 310px !important;}}

succede qualcosa di fastidioso. Come vedete le Media Queries sono quattro. Succede SEMPRE che almeno 2-3 di loro vengono trascurate e solo 1-2 di loro funzionano per davvero.
Io vedo certi siti web che li ridimensioni come vuoi, ma il responsive rimane da paura! Da invidiare!
Non so proprio come muovermi. Chiedo aiuto a voi. Grazie in anticipo!

[shane007]

Come faccio a creare un sito web responsive senza ridimensionare la finestra del browser e andare a tentativi? Dovrei fare una proporzione matematica? Ditemi voi quale tecnica D:

Non ho ben capito cosa intendi... Per quel poco che ho programmato resposive ho fatto così:
supponiamo che dobbiamo creare un sito con una navbar, del contenuto e un footer bello grande con dentro un po di contenuto.
Parto e faccio lo scheletro di base di tutta la pagina senza curare più di tanto l'aspetto, poi partendo dalla navbar inizio a mettere lo stile e controllo che si adatti alle vare dimensioni. Se mi accorgo che qualcosa si "sfasa" cambio la grandezza del testo, oppure tolgo un immagine(dipende dal caso specifico). Una volta completata la navbar passo all'elemento successivo e avanti così.

Per l'ultima domanda non saprei perchè... Con le media queries che hai scritto dovrebbero vedersi tutte!
Ma se invece sono impostate così:

/* Smaller than standard 960 (devices and browsers) */


@media only screen and (max-width: 959px) {
    body {
        background: yellow;
    }
}
/* Tablet Portrait size to standard 960 (devices and browsers) */


@media only screen and (min-width: 768px) and (max-width: 959px) {
    body {
        background: lightgreen;
    }
}
/* All Mobile Sizes (devices and browser) */


@media only screen and (max-width: 767px) {
    body {
        background: black;
    }
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */


@media only screen and (min-width: 480px) and (max-width: 767px) {
    body {
     background: brown;
    }
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */


@media only screen and (max-width: 479px) {
    body {
        background: white;
    }
}

la media query che mette lo sfondo "brown" sovrascrive ovviamente quella che mette lo sfondo nero perchè:
1) è scritta dopo quindi viene eseguita dopo
2) agisce nel caso in cui la dimesione sia tra 480 e 767 che quindi racchiude il caso della media query che mette lo sfondo nero

Prova a fare delle prove con alcune media queries provando a modificare lo sfondo per capire come funziona... Se ti capita qualche caso che non capisci posta il codice e proverò ad aiutarti.

[andreasurfer]

Ciao a tutti,
approfondisco il discorso per quanto riguarda la visione su mobile di un sito web. Ho un sito, responsive, con Wordpress ma mi crea alcuni problemi con la visione su mobile.

Premetto che non ho moltissima esperienza ma un minimo riesco a cavarmela. La domanda è semplicissima. Dove posso modificare i parametri css e come? Il sito è www.claudiomalagoli.com, che da web è ok poi sballa parecchio nei display piccoli e vorrei impostare dei campi specifici quando viene ridotto. Diciamo che fino a 750px è visibile poi inizia a creare problemi.

Spero di esser stato chiaro e chiedo soluzioni, idee o cmq un piccolo aiuto!!!

Grazie mille
A.

[Patronus]

Per l'ultima domanda non saprei perchè... Con le media queries che hai scritto dovrebbero vedersi tutte!

Ora ti spiego meglio. Tieni conto di questa pagina HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div align="center" id="headerdiv">
<span id="headerspan">LOREM IPSUM LOREM</span>
</div>
<button id="playnow">Inizia ora!</button>
</body>
</html>

e del suo codice CSS:

@media screen and (min-width: 1024px){ #playnow{margin-left: 440px !important;}}
@media screen and (min-width: 4096px){#playnow{margin-left: 1950px !important;}}
@media screen and (min-width: 931px){#playnow{margin-left: 390px !important;}}
@media screen and (min-width: 819px){#playnow{margin-left: 310px !important;}}


body {
background-repeat:no-repeat;
background-size: cover;
}


#headerspan {
margin-top: 110px;
font-family: Arial;
color: white;
font-size: 30px;
}


#headerdiv {
margin-top: 17px;
}


#playnow {
margin-top: 140px;
background-color: #174c94;
width: 140px;
height: 40px;
border: none;
border-radius: 5px;
font-family: Arial;
color: white;
font-size: 17px;
}

Se provi a far partire la pagina e poi provi a fare CTRL - e CTRL + (per variare le dimensioni della finestra) vedrai che il bottone INIZIA ORA non obbedisce ai comandi. Anche se provi a cambiare le coordinate (margin-left ecc) non ti ascolta -.-


Per quanto riguarda la domanda che non hai capito... io vedo moltissimi siti web (ovviamente compresi quelli famosi come facebook ecc) che se fai CTRL - e vari le dimensioni della finestra, la pagina si ridimensiona in modo PERFETTO e tutto non si muove dal CENTRO della pagina.
Perciò ti chiedevo, non c'è un modo per fare una proporzione di risoluzione? Ad esempio il mio schermo è 1024px di larghezza e il bottone ci sta bene a 410px dal margine destro, allora 1024:410=risoluzione2:x

Capito?

[shane007]

Beh, fare lo zoom in e lo zoom out non è assolutamente il miglior modo per testare se un sito è responsive o meno. Piuttosto prova a modificare la larghezza della finestra del browser!
Poi anche facebook non è per nulla responsive! Infatti se stringo la pagina non riesco a vedere nulla e devo spostarmi con la barra sotto!
fskif.jpg

Invece un bell'esempio di sito responsive è http://riotdesign.eu/
Infatti se provi a ridimensionare la dimensione della finestra noterai dei grossi cambiamenti che permettono la lettura dei contenuti anche con una finestra molto piccola!
riot.jpg

la pagina si ridimensiona in modo PERFETTO e tutto non si muove dal CENTRO della pagina.

Forse perché quei siti che hai guardato usano un "grid sytem" dove la larghezza dei contenuti è fissata ad un massimo di tot px. Molti siti usano la griglia a 960px (forse anche facebook??) perché si è visto che la maggior parte degli schermi in circolazione ha quella dimensione media.

[Prill]

... Tieni conto di questa pagina HTML:

...

[CODE]
@media screen and (min-width: 1024px){ #playnow{margin-left: 440px !important;}}
@media screen and (min-width: 4096px){#playnow{margin-left: 1950px !important;}}
@media screen and (min-width: 931px){#playnow{margin-left: 390px !important;}}
@media screen and (min-width: 819px){#playnow{margin-left: 310px !important;}}


Se provi a far partire la pagina e poi provi a fare CTRL - e CTRL + (per variare le dimensioni della finestra) vedrai che il bottone INIZIA ORA non obbedisce ai comandi. Anche se provi a cambiare le coordinate (margin-left ecc) non ti ascolta -.-

è normale che il pulsante non si sposti. Uno schermo ad alta risoluzione conterrà una larghezza minima di 819 pixel, che essendo l'ultima impostata, che sovrascriverà le altre, sarà quella adottata.

Dovrai piuttosto come Shane007 ti diceva impostare la larghezza massima

Poi: sarebbe da inserire un contenitore generale per tutti gli elementi, e piuttosto che posizionare il pulsante con un margine rispetto al body, posizionarlo rispetto al contenitore

Nel tuo codice poi non appare un Doctype. Lo usi? Se no, è da inserire

[Prill]

Ciao a tutti,
approfondisco il discorso per quanto riguarda la visione su mobile di un sito web. Ho un sito, responsive, con Wordpress ma mi crea alcuni problemi con la visione su mobile.

Premetto che non ho moltissima esperienza ma un minimo riesco a cavarmela. La domanda è semplicissima. Dove posso modificare i parametri css e come? Il sito è www.claudiomalagoli.com, che da web è ok poi sballa parecchio nei display piccoli e vorrei impostare dei campi specifici quando viene ridotto. Diciamo che fino a 750px è visibile poi inizia a creare problemi.

Spero di esser stato chiaro e chiedo soluzioni, idee o cmq un piccolo aiuto!!!

Grazie mille
A.

Ciao Andreasurfer, meglio non inserirsi in discussioni altrui per i propri problemi, ma aprire una nuova discussione per non creare confusione.

[costadilevante]

Credo che Prill ci abbia centrato in pieno. Chiarisco: se tu fai una regola che vale per i video con ris superiore a 819, questa varrà sia per i video da 1024 che per quelli da 4096, quindi tutti i video la vedranno così (tranne qualche cellulare). Le regole le devi riscrivere così:

@media screen and (min-width: 400px) and (max-width: 1024px)

Ancora una cosa: quella cosa del ctrl - e ctrl + mi sembra una follia pura! Ridimensiona la finestra del browser piuttosto! In ogni caso adesso google chrome ha una splendida funzione che ti fa vedere l'anteprima della pagina in tutti i dispositivi.
Ispeziona elemento -> emulation e quindi da device scegli il cellulare/tablet che preferisci.

[shane007]

In ogni caso adesso google chrome ha una splendida funzione che ti fa vedere l'anteprima della pagina in tutti i dispositivi.
Ispeziona elemento -> emulation e quindi da device scegli il cellulare/tablet che preferisci.

Sicuro che non sia un estensione? Io non trovo questa opzione!

---EDIT---
Trovato: https://developers.google.com/chrome...mulation-panel

[costadilevante]

Parla di Chrome versione 34 (non escludo sia presente anche nelle precedenti). Non si tratta di un'estensione.
Una volta fatto ispeziona elemento nella parte bassa (sotto il path del html) trovi quattro scritte che sono Console Search Emulation Rendering.
"Alza" la finestrella tenendo premuto il bottone sinistro del mouse e poi clicca su emulation. Li trovi tutto