So now that you know how to support the view
port meta, lets poke around in the developer tools to
see what we need to do to fix this page.
Now, the biggest problem here is that the page has
a fixed column width. If I resize the window, you'll
notice the column of text doesn't actually change size, just
margin position. As we mouse around the elements inside the
dev tools, we can pretty quickly find, the first offending element.
This page element here actually has a width set
on it. Let's disable that and see what happens. Well,
it certainly changed things, but I don't think that
it actually improved things very much. Let's keep digging inside
the content and see what we can find. This
wrapper element has a width of 100% already. Which is
good. It means that it's not preventing us from
resizing. But this content element does have a width set
in pixels. Let's disable that. Now as we resize
the page our content is fine but the sidebar is
appearing and disappearing. Sure enough, it has a width set.
If we set its width as a percentage also, now
we're resizing a little bit better. So now let's
go back up to the page, and let's try giving
it a width but let's give it a width in
view port units instead, now our only remaining problem seems
to be that the header is actually not resizing as
we want it to let's go take a look at
the header image again. The image has a max width
set, but not just a width. So, let's set its width.
And now, everything seems to be resizing well. Now, this isn't perfect,
but all that I really wanted to get at was that as you
try to transition pages from fixed layout to fluid layout, The core
things to look for, are fixed pixel sizes and lack of percentage resize.
Ahora que sabes cómo usar
la meta para el viewport
juguemos un poco
con las herramientas de desarrollo
para ver qué necesitamos hacer
para arreglar esta página.
Ahora bien, el mayor problema
aquí es que la página
tiene un ancho de columna fijo.
Si yo reajusto el tamaño de la ventana,
notarás que la columna de texto
no cambia de tamaño,
solo cambia su posición con respecto al margen.
Al mirar los elementos
en la herramientas de desarrollo, podemos
encontrar fácilmente el primer elemento ofensivo.
Este elemento de la página
tiene un ancho de página fijo.
Inhabilitémoslo y veamos qué pasa.
Bueno, ciertamente ha cambiado
las cosas, pero no creo que
haya mejorado mucho el asunto.
Sigamos investigando
el contenido para ver qué encontramos.
Este elemento de wrapper ya tiene
un ancho del 100%, lo cual es bueno.
Significa que no nos está impidiendo
reajustar el tamaño. Pero el elemento
de contenido tiene un ancho fijo en píxels.
Inhabilitémoslo. Ahora,
al reajustar el tamaño
de la página, nuestro contenido no tiene
problema, pero la barra lateral
aparece y desaparece.
Desde luego, tiene un ancho fijo.
Si ajustamos su ancho a
un porcentaje también,
ahora podemos reajustar
el tamaño de mejor forma.
Volvamos a la página, e intentemos
asignarle un ancho, pero
démosle un ancho en
unidades viewport esta vez.
Nuestro único problema ahora
parece ser que el encabezado
no está reajustándose como
quisiéramos, así que echémosle
un vistazo a la imagen del encabezado
una vez más. La imagen tiene
un ancho máximo asignado,
pero no un ancho en sí.
Así que, fijemos su ancho.
Y ahora, todo parece estar
reajustándose bien. No es perfecto,
pero todo lo que quería explicar
es que al intentar transicionar
páginas con diseño fijo a diseño fluido,
las cosas básicas a las que hay que
prestar atención, son los tamaños de píxeles
fijos, y a la falta de reajuste con porcentajes.
viewport metaタグの設定は完了です
デベロッパーツールで
このページを修復していきましょう
最も大きな問題はカラム幅が
固定されていることです
ウィンドウサイズを変更すると
テキストのカラムは変化せず
余白部分だけが変わります
デベロッパーツールで見れば
その理由はすぐに分かります
page要素に幅が設定してあります
これを無効にするとどうなるかやってみます
確かに変わりましたが
改善された感じはありません
さらに深く探っていきましょう
このwrapperは幅が100%に設定されています
リサイズの邪魔にならないので問題ありません
このcontent要素は幅がピクセルで設定されています
これを無効にしてページのサイズを変えると
サイドバーが出たり消えたりしています
確かに幅が設定されていますが
パーセンテージで設定し直しましょう
少しよくなりました
ではpageに戻って幅を設定します
今度は幅をvw値で設定します
今度はviewportユニットで設定してみます
残る問題はヘッダです
思うようにリサイズできません
幅ではなく最大幅が設定してありました
幅を設定しましょう
まだ完璧ではありませんがこれですべて適切に
リサイズできるようになりました
固定レイアウトから可変レイアウトへ移行する際には
固定ピクセルサイズと
リサイズのパーセンテージがカギとなります
Agora que você sabe
como definir o meta viewport
vamos fuçar nas ferramentas de
desenvolvimento
para ver o que precisamos fazer
para arrumar essa página.
Agora, o maior problema aqui
é que a página tem
uma largura fixa de coluna.
Se eu redimensiono a janela, você percebe
que a coluna de texto não muda de tamanho,
apenas a posição da margem.
Ao passar o mouse pelos elementos
dentro do DevTools
podemos achar facilmente
o primeiro elemento indesejado.
Esse elemento de página
tem uma largura definida.
Vamos desabilitá-la e ver o que acontece.
Bem, isso com certeza
mudou algumas coisas
mas não acho que melhorou muito.
Vamos continuar nos aprofundando
no conteúdo e ver o que podemos encontrar.
Esse elemento wrapper
já tem uma largura de 100%
o que é bom, pois significa que
não nos impede de redimensionar
mas esse elemento content
tem uma largura definida em pixels.
Vamos desabilitá-la.
Agora, quando redimensionamos a página
nosso conteúdo está bom, mas a barra lateral
está aparecendo e desaparecendo.
Com certeza, ela tem uma largura definida.
Se definimos sua largura como
uma porcentagem também
agora redimensionamos um pouco melhor.
Então vamos voltar para a página,
e vamos tentar atribuir-lhe uma largura
mas vamos atribuir uma largura
em unidades de viewport.
Agora, nosso único problema remanescente
parece ser que o cabeçalho
não está redimensionando
como gostaríamos.
Vamos dar uma olhada
na imagem de cabeçalho de novo.
A imagem tem uma largura máxima definida
mas não a largura em si.
Então, vamos definir sua largura.
E agora, tudo parece redimensionar bem.
Agora, isso não está perfeito
mas tudo o que eu queria destacar
era que, ao tentar fazer a transição de páginas,
do layout fixo para o flexível
as coisas mais importantes para verificar,
são tamanhos fixados em pixels
e falta de porcentagem
de redimensionamento.