Risoluzioni per siti web

Hackx

Utente Attivo
20 Ago 2013
109
0
16
Ciao a tutti :)

Sto progettando un sito web ...che su un monito da 23'' si vede alla perfezione mentre su un netbook da 10'' ... insomma devo giocherellare un po con lo scrollbar..

Vi è la possibilità di impostare, riconosciuto lo schermo, la percentuale di visualizzazione al 75%...poiché nel pc piccolo si vede alla perfezione a questa percentuali qui.

Spero che mi possiate aiutare.

Vi ringrazio moltissimo,
Andrea
 

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
0
sisi! devi definirlo nel css con le media query! comunque ormai adesso se progetti un sito web conviene farlo con un layout Responsive, cioè che si adatta automaticamente alla grandezza dello schermo! Bootstrap e Foundation sono ad esempio tra i framework più usati per la realizzazione di siti web responsive :)
 

Hackx

Utente Attivo
20 Ago 2013
109
0
16
Ciao LorenzoPi :),

Davvero gentilissimo :) !!!

Guarda mi potresti fare anche un esempio di "media query" con :
minimo di width = 900px
massimo di = 1224px

e come risultato

La pagina si vede al 75% ?

Così da capire un po il funzionamento di tutto : )

Ti ringrazio moltissimo,
Andrea
 

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
0
Ecco qua:
Codice:
/* stile css di default */
#mioElemento{
    width: 100%;
  }

/* Poi qui sotto ci sono i diversi casi e tu vedi quello che serve a te */

/* Primo caso in cui la width è >= a 900px, cioè se la larghezza dello schermo è almeno uguale o maggiore di 900px allora applico tutti gli stili che elenco dentro alla media query. In altre parole lo schermo del dispositivo deve avere almeno una larghezza pari o maggiore a 900px per poter applicare gli stili definiti dentro */
@media only screen and (min-width: 900px) {
  #mioElemento{
    width: 75%;
  }
}

/* Secondo caso in cui la width è <= a 1224px, cioè se la larghezza dello schermo è almeno uguale o minore di 1224px allora applico tutti gli stili che elenco dentro alla media query. In altre parole lo schermo del dispositivo deve avere almeno una larghezza pari o minore a 1224px per poter applicare gli stili definiti dentro */
@media only screen and (max-width: 1224px) {
  #mioElemento{
    width: 75%;
  }
}

/* Terzo caso in cui la width è compresa tra questo intervallo: 900px >= width <= a 1224px, cioè se la larghezza dello schermo è compresa tra 900px(compreso) e 1224px(compreso) allora applico tutti gli stili che elenco dentro alla media query */
@media only screen and (min-width: 900px) and (max-width: 1224px){
  #mioElemento{
    width: 75%;
  }
}

Spero si capisca! :D
 

Hackx

Utente Attivo
20 Ago 2013
109
0
16
Ciao LorenzoPi :),

Niente da aggiungere ;) una spiegazione perfetta.. Grazie mille davvero per tutti questi preziosi consigli :)

Andrea
 

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
0
prego! ;).. è molto utile sapere queste cose! soprattutto adesso che ormai fare un layout responsive è praticamente il minimo per un sito :)
 
Discussioni simili
Autore Titolo Forum Risposte Data
A Layout stabile per varie risoluzioni HTML e CSS 0
V Adattare sito web per tutte le risoluzioni ? HTML e CSS 1
D Ottimizzare il sito per le diverse risoluzioni HTML e CSS 0
S Soluzione per risoluzioni? Discussioni Varie 2
E sfondi per pagine internet adattabili a varie risoluzioni HTML e CSS 3
C Dimensioni font-size monitor grandi risoluzioni HTML e CSS 3
P Adattare sito alle varie risoluzioni... HTML e CSS 2
I Risoluzioni problemi html HTML e CSS 7
P Adattare sito a diverse risoluzioni HTML e CSS 14
F Controllo risoluzioni sito Presenta il tuo Sito 0
P Adattare un layer alle varie risoluzioni HTML e CSS 0
G Layout che si adatta a tutte le risoluzioni video Javascript 1
L script a diverse risoluzioni Javascript 0
G Vedere schermo in varie risoluzioni con Firefox? Windows e Software 0
M Risoluzioni vari pc Webdesign e Grafica 9
M Centrare un logo in tutte le risoluzioni.... HTML e CSS 4
N Sito con diverse risoluzioni [Era: Need Helpppppp :)] Webdesign e Grafica 10
G adattare pagina web a tutte le risoluzioni HTML e CSS 9
I Costruire sito che si ridimensiona a tutte le risoluzioni? Webdesign e Grafica 5
N Non Autorizzato. Dovresti rimuovere il parametro customize_messenger_channel per visualizzare l'anteprima in frontend. WordPress 1
P Aiuto per rendere un Bot Telegram Privato PHP 0
V Query per una somma PHP 2
A Tabella con bottoni per aggiornamento record PHP 6
G Consigli SEO per scrittura e struttura pagine SEO e Posizionamento 5
P Passare solo alcuni parametri a script per CSV PHP 0
A Consiglio per creazione sito web CMS (Content Management System) 0
A Regex per isolare link interni con rel noopener PHP 0
L form immagini per il database PHP 0
S CREAZIONE DI SITO PER CORSI DI FORMAZIONE WordPress 1
I [cerchiamo][retribuito] Grafico/a per stickers Offerte e Richieste di Lavoro e/o Collaborazione 0
R Cercarsi programmatore per GDR PBC Offerte e Richieste di Lavoro e/o Collaborazione 0
L Sessione e array per utenti PHP 0
A Sottoquery con group by per mese MySQL 0
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
V [Cerco] Socio e Sviluppatore per App PlacesFinder Offerte e Richieste di Lavoro e/o Collaborazione 0
M user agent per il download di api PHP 0
B Stringa sql per ricerca su più campi Database 1
Cosina Upload multiplo con invio allegati per email PHP 0
P Editor per la realizzazione di siti HTML e CSS 0
M Versione nativa per M1. Photoshop 1
A Aiuto per pagina php PHP 0
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 8
T [cerco] scrittore/scrittrice per articoli web Offerte e Richieste di Lavoro e/o Collaborazione 5
L Interfaccia grafica per gestire sql server .NET Framework 1
B javascript per problemi con pdf e Safari Javascript 0
R Plugin per Gestire videocorsi a pagamento WordPress 3
Y Vorrei selezionare un colore di sfondo per una pagina web Javascript 0
C media per riga MySQL 1
I Cerca: blogger IT per articoli di prova Offerte e Richieste di Lavoro e/o Collaborazione 0
R Plugin per Registrazione Utente e Pagamento prodotto WordPress 2

Discussioni simili