March 7
Un sito che ha un layout a larghezza fissa ha codice nel file foglio di stile CSS che imposta le sezioni del layout del sito di una certa larghezza in pixel. Ciò significa che il sito non viene ridimensionato in base schermo del computer. Un sito web con un layout liquido larghezza ha codice nel file CSS che imposta le sezioni della larghezza del layout del sito per una percentuale di dimensione dello schermo di visualizzazione della vista. Ciò significa che il sito si ridimensiona per adattarsi schermo dello spettatore. È possibile modificare un carattere a dimensione fissa di layout a un layout liquido larghezza sostituendo la larghezza impostata in pixel con larghezze relative a percentuali.
1 Aprire il file CSS del layout che si desidera cambiare ad una larghezza di liquido nel codice HTML preferito o un editor di testo semplice.
2 Individuare l'involucro principale nel codice CSS. L'involucro principale controlla la larghezza dell'intero layout. Di solito è situato nella parte superiore del file CSS, ed è nome del selettore generalmente contiene la parola "involucro" o "contenitore" con una parola come "Main" o "pagina" per spiegare che è l'involucro principale per la luogo. All'inizio del nome selettore è un hashtag, e seguendo l'involucro principale è un elenco di proprietà, tra cui "width."
Per esempio:
main-wrapper {
Larghezza: 1000px;
3 Individuare la proprietà "larghezza" nella lista delle principali proprietà involucro. Prendere nota di ciò che la larghezza fissa del involucro principale è in pixel, quindi sostituire la larghezza in pixel con "100%"
Ad esempio, è necessario cambiare questo pezzo di codice:
main-wrapper {
Larghezza: 1000px;
a
main-wrapper {
width: 100%;
4 Individuare ciascuno dei wrapper per le barre laterali nel file CSS. Solitamente si trova nei pressi del codice involucro principale e hanno "sidebar" come parte del nome del selettore.
Per esempio:
left-sidebar-wrapper {
width: 200px;
5 Convertire la larghezza in pixel alla percentuale proporzionale del sito che si desidera la barra laterale per coprire.
Ad esempio, se la larghezza originale del sito era 1000 pixel, cambiare questo pezzo di codice:
left-sidebar-wrapper {
width: 200px;
a
left-sidebar-wrapper {
width: 20%;
6 Salvare il file CSS con gli involucri convertiti in percentuali.
7 Aprite il vostro client preferito FTP e accedere al server Web dal vivo. Passare al percorso del vecchio file CSS sul vostro sito web, e caricare il file CSS trascinandolo dal lato computer locale del client sul lato server di vivere. Rilasciarlo sopra del file CSS vecchia. Fai clic su "OK" per confermare che si desidera sovrascrivere il file CSS vecchio.
8 Apri il tuo sito web nel browser Internet per vedere che visualizza correttamente con il layout liquido convertito.